JavaScript文档对象模型（DOM）——节点层次Node类

2017-06-06 本文已影响224人胖胖冰

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许添加、移除和修改页面的一部分。DOM1级为基本的文档结构即查询提供了接口。

节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特定、数据和方法，另外也与其它节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。HTML为例：

    <html>
        <head>
            <title>Sample Page</title>
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>>

简单的HTML文档层次结构

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即<html>元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是<html>。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点表示，而注释通过注释节点表示。总共有12种节点类型，这些类型都继承自一个基类型。

1.Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。除了IE之外，其他所有浏览器都可以访问这个类型。JavaScript中的所有节点都继承自Node类型，因此所有节点类型都共享者相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列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)

通过比较上面这些常量，可以很容易地确定节点的类型。

        if (someNode.nodeType == Node.ELEMENT_NODE) {//在IE中无效
            alert("Node is an element.");
        }

为了确保浏览器兼容，最后还是将nodeType属性与数字值进行比较。

        if (someNode.nodeType == 1) {//适用于所有浏览器
            alert("Node is an element.");
        }

并不是所有节点都受到Web浏览器的支持，最常用的是元素和文本节点。

1.nodeName和nodeValue属性
要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型，在使用这两个值以前，最好先检测以下节点的类型。

        if (someNode.nodeType == 1) {//适用于所有浏览器
            value = someNode.nodeName;  //nodeName的值是元素的标签名
        }

对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。

2.节点关系

每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它不是Array的实例。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结构，因此DOM结构的变化能够自动反映在NodeList对象中。
访问存在NodeList中的节点——可以通过方括号，也可以使用item()方法。

        var firstChild = someNode.childNodes[0];
        var secondChild = someNode.childNodes.item(1);
        var count = someNode.childNodes.length;

length属性表示的是访问NodeList那一刻，其中包含的节点数量。
对arguments对象使用Array.prototype.slice()方法可以将其转换为数组，同样的方法，也可以将NodeList对象转换为数组。

        //在IE8及之前的版本无效
        var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

        function convertToArray(nodes) {
            var array = null;
            try{
                array = Array.prototype.slice.call(nodes,0); //针对非IE浏览器
            }catch(ex){
                array = new Array();
                for(var i=0, len = nodes.length; i<len; i++){
                    array.push(nodes[i]);
                }
            }
            return array;
        }

每一个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表汇总的其他节点。

节点关系

hasChildNodes()在节点包含一或多个子节点时返回true。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

3.操作节点
因为关系指针都是只读的，所有DOM提供了一些操作节点的方法。最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的得到更新。更新完成后，appendChild()返回新增的节点。

        var returnedNode = someNode.appendChild(newNode);
        alert(returnedNode == newNode); //true
        alert(someNode.lastChild == newNode); //true

如果传入到appendChild()中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置上。

        var returnedNode = someNode.appendChild(someNode.firstChild);
        alert(returnedNode == someNode.firstChild); //false
        alert(someNode.lastChild ==someNode.lastChild); //true

如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null,则insertBefore()和appendChild()执行相同的操作。

        returnedNode = someNode.insertBefore(newNode,null);
        alert(newNode == someNode.lastChild); //true

        returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
        alert(returnedNode == newNode); //true
        alert(newNode == someNode.firstChild); //true

        returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
        alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将有这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

        var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
        returnedNode = someNode.replaceChild(newNode,someNode.lastChild);

如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点，被移除的节点将成为方法的返回值，

        var formerFirstChild = someNode.removeChild(someNode.firstChild);
        var formerFirstChild = someNode.replaceChild(someNode.lastChild);

4.其他方法
有两个方法是所有类型的节点都有的。cloneNode()和normalize()。
cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，只复制节点本身。
cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，如事件处理程序等。只复制特性、子节点。

normalize()，这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或接连储量俩个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中中查找上述两种情况。如果找到了空文本节点，删除它；如果找到相邻的文本节点，合并它们。

JavaScript文档对象模型（DOM）——节点层次Node类

节点层次

猜你喜欢

热点阅读