JavaScript文档对象模型(DOM)——节点层次Node类型

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操作等原因,可能会出现文本节点不包含文本,或接连储量俩个文本节点的情况。当在某个节点上调用这个方法时,就会在该节点的后代节点中中查找上述两种情况。如果找到了空文本节点,删除它;如果找到相邻的文本节点,合并它们。

推荐阅读更多精彩内容