JavaScript高级程序设计——笔记（第10章）

第10章 DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
注意：IE中所有的DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象和原生JavaScript对象的行为或活动特点并不一致。

10.1 节点层次

文档节点是每个文档的根节点，文档节点通常只有一个子节点——文档元素（元素）。
文档元素是稳当的最外层元素，文档中的其他元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是元素，在XML中，没有预定义的元素，因此任何一个元素都可以成为文档元素。

10.1.1 Node类型

DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中所有节点类型都继承自Node类型，因此所有节点类型都共享着基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE

确定节点类型时，可以将someNode.nodeType与Node.XXX_NODE常量相比较，然而，由于IE并没有公开Node类型的构造函数，因此在IE中不能这样确定节点类型。为了确保跨浏览器兼容，最好还是将someNode.nodeType属性与数字值相比较，如下所示：
if (someNode.nodeType == 1) {
//适用于所有浏览器 1~12
}
并不是所有节点都受到Web浏览器的支持，开发者最常用的是元素节点和文本节点。

nodeName和nodeValue属性
要了解节点的具体信息，可以使用节点的nodeName和nodeValue属性。在使用这两个节点之前，最好先检测一下节点类型：

    if (someNode.nodeType == 1) {
        value = someNode.nodeName;  //nodeName的值是元素的标签名
    }

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

节点关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，和arguments一样，并非Array的实例。NodeList的独特之处在于，它实际上是基于DOM结构动态执行查询的结果。因此DOM结构的变化能够自动反映到NodeList对象中。我们常说，NodeList对象是有呼吸，有生命的对象，而不是我们在第一次访问它时拍下的一张快照。访问NodeList对象里的节点有两种方法，方括号（类似于数组）的方式和item()方法。示例：

        var firstChild = someNode.childNodes[0];
        var secondChild = someNode.childNodes.item(1);
        var cpunt = someNode.childNodes.length;//length属性表示childNodes对象中子节点的数量

在前面介绍过，使用Array.prototype.slice()方法可以将arguments对象转换为一个数组，同样，使用这个方法可以把childNodes对象转换为数组：

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

因为在IE8之前，childNodes在IE中并非一个JScript对象，而是一个COM对象，使用上面的语法会抛出错误。在IE浏览器（IE8之前），需要手动枚举childNodes中的每个子节点，最终组成一个数组：

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

每个节点都有一个parent属性，里面是它的父节点。包含在childNodes对象中的所有子节点都有一个共同的父节点。因此他们的parent属性都指向同一个父节点。此外，包含在childNodes列表中的节点都是同胞节点，通过每个节点的previousSibling属性和nextSibling属性可以访问到同一列表的其他节点。列表中第一个节点的previousSibling属性为null，最后一个节点的nextSibling属性为null。如下所示：

        if (someNode.nextSibling === null) {
            alert("Last node in the parent's childNodes list.")
        } else if (someNode.previousSibling === null) {
            alert("First node in the parent's childNodes list.")
        }

如果childNodes中只有一个节点，那它的previousSibling属性和nextSibling属性都为null。
父节点和第一个子节点、最后一个子节点也有特殊的关系。父节点的firstChild和lastChild分别指向childNotes的第一个节点和最后一个节点。如果没有子节点，那么firstChild和lastChild都为null。仔细查看原书中图10-2。
hasChildNodes()方法在父节点包含一个或者多个子节点时返回true，没有子节点时返回false。
最后是所有的节点都有的一个属性叫做ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档。任何节点都不能同时存在于两个或更多文档中，通过这个属性，我们不必层层回溯到达顶端，而是可以直接访问文档节点。
虽然所有节点都继承自Node节点，但并非所有节点都有子节点。

操作节点
因为关系指针都是只读的，所以DOM提供了一系列操作节点的方法。
appendChild()：添加一个新节点到父节点childNotes的最后一个位置并返回这个节点

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

如果添加的新节点是文档中已有节点的话，则改变它的位置（将这个节点移动到最后）

    //someNode有多个子节点
    var returnedNode = someNode.appendChild(someNode.firstChild);
    alert(returnedNode == someNode.firstChild); //false 第一个子节点已经改变
    alert(returnedNode == someNode.lastChild);  //true

insertrefore()：插入节点，将要插入的节点放在父节点childNotes的某个位置上，接收两个参数。参数一是要插入的节点，参数二是作为参照的节点。结果是要插入的节点将插入到参照节点之前（成为同胞节点，参数一是参数二的previousSibling）。方法返回要插入的节点（即参数一）。
参数二为null时，和appendChild()方法一样，插入到childNotes的最后。

    //插入后成为最后一个子节点
    returnedNode = someNode.insertrefore(newNode, null);
    alert(returnedNode == someNode.lastChild);  //true

    //插入后成为第一个子节点
    returnedNode = someNode.insertrefore(newNode, someNode.firstChild);
    alert(returnedNode == newNode); //true
    alert(newNode == someNode.firstChild);  //true

    //插入到最后一个子节点前面
    returnedNode = someNode.insertrefore(newNode, someNode.lastChild);
    alert(newNode == someNode.childNodes[someNode.childNodes.length - 2]);  //true

replaceChild()：替换节点。接收两个参数，参数一是要插入到childNotes中的节点（新节点），参数二是被替换的节点（旧节点）。被替换的节点将从文档树中被移除，由参数一代表的要插入的节点占据其位置（参数一替换参数二）。方法返回被替换的节点（参数二）。在使用replaceChild()替换一个节点时，被替换的节点所有关系指针将被复制到要插入的节点上。从技术角度讲，被替换的节点还在文档中，但是在文档树中已经没有了它的位置。

    //替换第一个子节点
    var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

    //替换最后一个子节点
    returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild()：移除指定节点，返回被移除的节点。被remove的节点还在文档中，但是在文档树中已经没有了它的位置

    //移除第一个子节点
    var formerFirstChild = someNode.removeChild(someNode.firstChild);

    //移除最后一个子节点
    var formerLastChild = someNode.removeChild(someNode.lastChild);

上面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法要先取得父节点，另外，不是所有的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。

其他方法
有两个方法是所有类型的节点都有的：cloneNode() normalize()。
cloneNode()：创建一个调用这个方法的节点的一个副本。接收一个参数，参数值为true和false。true表示深复制，将复制整个节点和子节点树；false表示浅复制，只复制这个节点，不复制其子节点树。复制后返回的节点归文档所有，但没有为它指定父节点，因此这个节点副本就成了一个“孤儿”。除非通过appendChild()、insertrefore()或者replaceChild()方法将它添加到文档中。
假设有如下HTML代码：

    <ul id="ul"><li>item1li><li>item2li><li>item3li>ul>

脚本：

        var mylist = document.getElementryId("ul");
        var deepList = mylist.cloneNode(true);
        alert(deepList.childNodes.length);  //3

        var shallowList = mylist.cloneNode(false);
        alert(shallowList.childNodes.length);   //0

如果HTML代码如下：

        <ul id="ul">
            <li>item1li>
            <li>item2li>
            <li>item3li>
        ul>

那么脚本代码结果将变为：

        var mylist = document.getElementryId("ul");
        var deepList = mylist.cloneNode(true);
        alert(deepList.childNodes.length);  //7

        var shallowList = mylist.cloneNode(false);
        alert(shallowList.childNodes.length);   //0

之所以(deepList.childNodes.length的值会发生改变，是因为IE（IE<9）和其他浏览器处理空白文本节点的机制不一样 ，FF，谷歌，IE>=9浏览器会将各个节点之间的空白也算作一个节点，但是IE（IE<9）不会。
解决方法一：像上面那样修改HTML源码节点之间无空格。
解决方法二：调用childNodes属性之前先将空格删除 （HTML源码可以缩进），脚本代码为：

        var mylist = document.getElementryId("ul");
        var deepList = mylist.cloneNode(true);
        for (var i = 0; i < deepList.childNodes.length; i++) {
            //如果是文本节点，并且值为空，则删除该节点
            if (deepList.childNodes[i].nodeType == 3 && /\s/.test(deepList.childNodes[i].nodeValue)) {
                deepList.childNodes[i].parentNode.removeChild(deepList.childNodes[i]);
            }
        }
        alert(deepList.childNodes.length);  //3

        var shallowList = mylist.cloneNode(false);
        alert(shallowList.childNodes.length);   //0

nodeType为常数3时表示节点为文本节点，第二个条件为使用正则表达式判断当前这个节点中是否含有空格（\s）。
normalize()：这个方法的唯一作用就是处理文档树中的文本节点。由于解析器的实现或者DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点则删除它，如果找到了两个相邻的文本节点则将它们合并为一个文本节点。

10.1.2 Document类型

JavaScript中通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的第一个实例，表示整个HTML页面。而且，document对象是window对象的属性，因此可以将其作为全局对象来访问。Document节点具有以下特征：

• nodeType的值为9
• nodeName的值为“#document”
• nodeValue的值为null
• parentNode的值为null
• ownerDocument的值为null
• 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

Document类型可以表示HTML页面或者其他基于XML的文档。不过，最常见的应该是作为HTMLDocument实例的document对象。通过这个对象，不仅能够取得与页面有关的信息，还可以操作页面的外观和底层结构。
补充：在Firefox、Safari、Chrome和Opera中，可以通过脚本访问Document类型的构造函数和原型。但在所有浏览器中都可以访问HTMLDocument类型的构造函数和原型。

文档的子节点
虽然DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment，但还有两个内置的访问其子节点的快捷方式，第一个就是documentElement属性，该属性始终指向HTML页面中的元素。另一个就是通过childNotes列表访问文档元素，但通过documentElement属性能更快捷、更直接的访问该元素。示例;
HTML代码：

    <html lang="en">
    <body>
    body>
    html>

脚本代码：

        var html = document.documentElement;
        alert(html === document.firstChild);    //true
        alert(html === document.childNodes[0]); //true

documentElement虽然永远指向元素，但是document.firstChild和document.childNodes[0]不一定。
document还有一个body属性，指向元素，开发人员经常要使用这个元素，因此document.body在JavaScript代码中出现的频率非常高。

    var body = document.body；

所有浏览器都支持document.documentElement和document.body属性。
Document另一个可能的子节点是DocumentType。通常将标签看成一个与文档其他部分不同的实体，可以通过doctype属性（浏览器中是document.type来访问它的信息）：

    vardoctype=document.doctype;

浏览器对document.doctype的支持差别很大，可以给出如下总结：

1.IE8及之前版本：如果存在文档类型声明，会将其错误的解释为一个注释并把它当做Comment节点；而`document.doctype`的值始终为null。
2.IE9+及Firefox：如果存在文档类型声明，则将其作为文档的第一个子节点；`document.doctype`是一个DocumentType节点，也可以通过`document.firstChild`或者`document.childNodes[0]`访问同一个节点。
3.Safari、Chrome和Opera：如果存在文档类型声明，则将其解析，但不作为文档的子节点。`document.doctype`是一个DocumentType节点，但该节点不会出现在document.childNodes中。

由于浏览器对这个属性的支持不一致，因此这个属性的用处也很有限。

文档信息
作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。这些属性提供了document对象所表现的一些网页的信息。其中第一个属性就是title，包含着