DOM-Node基本类型

Posted on by mannuan 2 mins read
Table of Contents
  1. DOM1级定义了一个Node接口，该接口作为Node类型实现;
// 节点类型（nodeType）1~12
Node.ELEMENT_NODE;  // 1
Node.ATTRIBUTE_NODE;  // 2
Node.TEXT_NODE;  // 3
Node.CDATA_SECTION_NODE;  // 4
Node.ENTITY_REFERENCE_NODE;  // 5
Node.ENTITY_NODE;  // 6
Node.PROCESSING_INSTRUCTION_NODE;  // 7
Node.COMMENT_NODE;  // 8
Node.DOCUMENT_NODE;  // 9
Node.DOCUMENT_TYPE_NODE;  // 10
Node.DOCUMENT_FRAGMENT_NODE;  // 11
Node.NOTATION_NODE;  // 12

  1. JavaScript中所有节点类型都继承自Node类型，所有的节点类型都共享相同的基本属性和方法；

  2. 最佳实践：对节点进行操作时，最好使用nodeType检测节点的类型;

nodeName和nodeValue

对于元素节点(nodeType === 1)，nodeName是元素标签名的大写，nodeValue的值始终是null;

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="ele">
            some text
        </div>
    </body>
    <script>
        var ele = document.getElementById("ele");
        console.log(ele.nodeType === 1);  // 输出：true
        console.log(ele.nodeName);  // 输出：DIV
        console.log(ele.nodeValue);  // 输出：null
    </script>
</html>

节点关系

  • 节点关系可以用传统的家族关系来表示，文档树可以看做家谱；
  • 节点的childNodes属性保存的是一个NodeList对象；
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var ul = document.getElementById("ul");
        console.log(ul.childNodes instanceof NodeList);  // 输出：True
    </script>
</html>
  • NodeList是一种类数组对象，但不是Array的实例，用于保存一组有序的节点，因为是基于DOM结构动态执行查询的结果，所以NodeList对象是动态变化的（例如length属性）
  • NodeList中节点的访问方法：
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var _childNodes = document.getElementById("ul").childNodes;
        console.log(_childNodes[3]);  // 方法1
        console.log(_childNodes.item(3));  // 方法2
    </script>
</html>

  • NodeList对象转数组的通用方法：详见Javascript-DOM中NodeList对象转数组的通用方法

  • previousSibling, nextSibling, previousElementSibling, nextElementSibling, firstChild, lastChild, firstElementChild, lastElementChild 如果以上属性没有指向，则返回null

  • children可以过滤所有其他节点类型，返回所有元素类型的子节点：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var _children = document.getElementById("ul").children;
        console.log(_children);
    </script>
</html>

  • hasChildNodes() 方法用于检测是否含有该子节点

  • ownerDocument 属性指向于整个文档的文档节点，每个节点都有这个属性；

节点的操作

  • appendChild()新增节点：
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var ul = document.getElementById("ul");
        var newLi = document.createElement("li");
        ul.appendChild(newLi);
        console.log(ul.childNodes.length);
    </script>
</html>

  • insertBefore() 包含两个参数，顺序分别是：要插入的节点和参照的节点，返回被插入的节点；

  • replaceChild(), removeChild() 返回的是被替换、移除的节点 ，被替换和移除的节点仍然在文档中存在，只不过没有了位置。

  • 在不支持子节点的节点上调用上面提到的子节点的方法，会导致错误的发生；

其他方法

  1. cloneNode() 创建调用这个方法的节点的一个完全相同的副本，当传入可选布尔参数为true时，将执行深拷贝；
  2. cloneNode() 不会拷贝添加到DOM节点中的Javascript属性，例如事件处理程序；IE浏览器会连带事件处理程序一起拷贝；
  3. 最佳实践：在cloneNode()之前先移除事件处理程序；
  4. normalize()的作用：处理文档树中的文本节点，它会删除空文本节点，合并相邻的两个文本节点。