Element、Node

1、DOM节点

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
节点包含元素
元素节点 = DOM 元素

2、Element对象

Element 对象表示 HTML 元素
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点

3、节点树

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <ul>
        <li>
            <h2>标题标签</h2>
            <a href="">超链接标签</a>
            <p>段落标签</p>
        </li>
    </ul>
</body>
</HTML>

具体层级：
ul > body > html > document >null

4、节点属性

常用属性
childNodes    获取子节点，可能多个
innerHTML：设置或返回元素的内容
    HTMLElement.prototype 和 Element.prototype 中，返回标签文本


// 不常用属性
innerText：设置或返回文本
    HTMLElement.prototype 中，返回文本; 老版本FF不支持，
    textContent替代方案(IE老版本不支持)
parentNode    获取父节点，只有一个
firstChild    第一个节点
lastChild    最后一个节点
nextSibling    下一个同辈节点
previousSibling    上一个同辈节点
parentElement    查找节点父元素(IE9及以下不支持)
children    返回节点的所有子元素(IE7及以下不支持)
    childElementCount = children.length
firstElementChild    获取第一个直接子节点(IE9及以下不支持)
lastElementChild    获取最后一个直接子元素(IE9及以下不支持)
nextElementSibling    查找当前节点的下一个兄弟元素(IE9及以下不支持)
previousElementSibling    查找当前节点的上一个兄弟元素(IE9及以下不支持)

5、节点方法

hasChildNodes()
用来检查一个元素是否有子节点，返回 true  或 false

appendChild()
 在Node.prototype中，使用 node.appendChild(节点/DOM元素); 参数不能用字符串
1、增加子节点到父级元素的最后
2、剪切节点到父级元素的最后

innertBefore()
用法：c.innertBefore(a, b);
作用：插入，在父级c节点下的子节点b之前插入a节点
含义：c: 父节点，a: new 节点，b: origin节点

removeChild()
用法：父节点.removeChild(子节点)
作用：删除节点，但无法清除内存中相应的子节点，返回值为 删除的子节点
在Node.prototype中

remove()
子节点.remove();
ES5中直接删除内存中子节点方法

replaceChild()
用法：parent.replaceChild(new, origin)
作用：父级中旧节点替换为新节点

cloneNode()
复制当前节点，或者复制当前节点以及它的所有子孙节点。

setAttribute()
设置元素属性

getAttribute()
获取元素属性

TML5 的 data-* 属性
节点.dataset 获取data的属性

6、常用节点

nodeName	nodeType	Constant	接口	nodeValue
元素节点 element	1	Node.ELEMENT_NODE	Element	null
属性节点 attr	2	Node.ATTRIBUTE_NODE	Attr	属性值
文本节点 text	3	Node.TEXT_NODE	Text	节点文本
注释节点 comment	8	Node.COMMENT_NODE	Comment	注释文本
文档节点 document	9	Node.DOCUMENT_NODE	Document	null
文档碎片 DocumentFragment	11	Node.DOCUMENT_FRAGMENT_NODE	DocumentFragment	null

7、子元素查找封装

// 封装子元素查找方法
function elemChildren(node) {
    // 数组实现
    /*var arr = [],
        children = node.childNodes;

    for(var i = 0; i < children.length; i++) {
        var childItem = children[i];

        if (childItem.nodeType === 1) {
            arr.push(childItem);
        }
    }

    return arr;*/

    // 类数组改写
    var temp = {
        'length': 0,
        'push': Array.prototype.push,
        'splice': Array.prototype.splice
    },
    children = node.childNodes;

    for(var i = 0; i < children.length; i++) {
        var childItem = children[i];

        if (childItem.nodeType === 1) {
            // temp[temp['length']] = childItem;
            // temp['length']++;
            temp.push(childItem); // push 或自动++length
        }
    }

    return temp;
}

console.log(elemChildren(div));

8、一个元素变为元素节点的过程

1、选择元素
div

2、构造函数实例化
new HTMLDivElement()
div DOM对象
存到内存当中

3、元素节点(div节点)
removeChild(div)
删除节点(无法删除内存中的DOM对象)