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对象)