《JavaScript高级程序设计》（第3版）读书笔记 第10章 DOM

摘要：年月级规范成为的推荐标准，为基本的文档结构及查询提供了接口。这意味着中的对象与原生对象的行为或活动特点并不一致。结果第一条注释就会成为中的第一个子节点。由于跨域安全限制，来自不同子域的页面无法通过通信。

DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立方式。

1998年10月DOM 1 级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口。本章主要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript对DOM1级的视线。

IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。本章将较多的谈及这些差异。

节点层次

  
    
  
  
    
Hello World!
  

可以将这个简单的HTML文档视为一个层次结构，如图10-1所示。

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，既元素，我们称之为文档元素。

文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

Node 类型

DOM1级定义了一个 Node 接口，该接口将由 DOM 中所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。

JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性，用于表明节点的类型。及诶单类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一(编号为节点类型常量存储的数值)：

Node.ELEMENT_NODE

Node.ATTRIBUTE_NODE

Node.TEXT_NODE

Node.CDATA_SECTION_NODE

Node.ENTITY_REFERENCE_NODE

Node.ENTITY_NODE

Node.PROCESSING_INSTRUCTION_NODE

Node.COMMENT_NODE

Node.DOCUMENT_NODE

Node.DOCUMENT_TYPE_NODE

Node.DOCUMENT_FRAGMENT_NODE

Node.NOTATION_NODE

// 通过比较上面的常量，很容易的确定节点类型
// 在IE中无效
if (someNode.nodeType == Node.ELEMENT_NODE) {
  console.log("Node is an element");
}

// 由于IE没有公开 Node 类型的构造函数
// 最好还是将 nodeType 属性与数字比较
if (someNode.nodeType == 1) {
  console.log("Node is an element");
}

并不是所有节点类型都受到Web浏览器的支持。开发人员最常用的就是元素和文本节点。

nodeName 和 nodeValue 属性

了解节点的具体信息，可以使用nodeName 和 nodeValue 两个属性。这两个属性的值完全取决于节点类型。在使用这两个值以前，最好用上述的代码检查节点的类型。

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

节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。注意，可以通过方括号语法来访问NodeList的值，而且也有length属性，但它并不是Array的实例。

NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。我们常说NodeList是有生命、有呼吸的对象，而不是我们第一次访它的瞬间拍摄下来的一张快照。

// 方括号和 item() 语法结果是相同的
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = comeNode.childNodes.length;

// 虽然不是Array的实例，但我们可以将它转换成数组
// 在IE8及之前的版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);

// 由于IE8及更早版本将 NodeList 实现为一个 COM 对象
// 必须手动枚举所有成员，才能转换成数组
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 属性可以访问同一列表中的其他节点。列表第一个节点previousSibling为null，列表最后一个nextSibling为null，当然如果列表只有一个节点，那么两个都是null。

父节点的firstChild和lastChild属性分别指向第一个和最后一个。如果列表没有节点，那么两个属性都是null。

hasChildNodes()也是一个非常有用的方法，当查询节点存在子节点时返回true，不存在返回false。这是比查询childNodes.length更简单的方法。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在两个或更多个文档中。通过这个属性，我们可以不必在节点层次中通过层层回溯达到顶端，而是可以直接访问文档节点。

操作节点

因为关系指针都是只读的，所以DOM提供了一些操作节点的方法 。

最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点，执行后，方法返回新增的节点。

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

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

// 插入后成为最后一个子节点
var returnedNode = someNode.insertBefore(newNode, null);

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

// 插入后在最后一个子节点前面
var returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

replaceChild() 替换节点。同样接收两个参数，插入的节点和参照节点。插入新的节点并将参照节点从文档树中移除，新的节点会从被替换的节点复制所有关系指针。尽管从技术上讲，被替换的节点仍然在文档中，但它在文档中的位置已经不存在了。

removeChild() 移除节点。被移除的节点仍然在文档中，但它在文档中的位置已经不存在了。

以上四个方法必须先取得操作节点的父节点（代码示例中是someNode）。在不存在子节点的节点上调用以上方法，会导致错误。

其他方法

还有两个方法是所有节点都有的。

cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数，表示是否执行深复制。

传入true。执行深复制，复制节点及其整个子节点树

传入false。执行浅复制，即只复制节点本身。

复制返回的节点副本属于文档所有，但并没有为它制定父节点。因此这个节点副本就成为了一个“孤儿”，除非通过 appendChild() insertBefore() replaceChild() 将它添加到文档中。

IE8及之前的版本不会为包含空白符的文字创建节点（TEXT)

clone() 方法不会复制添加到DOM节点中的JavaScript属性，例如时间处理程序。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切都不会复制。

IE 会复制事件处理程序，所以我们建议在复制之前最好先移出事件处理程序。

  
item 1
  
item 2
  
item 3

var myList = document.getElementById("ul");
var deepList = myList.cloneNode(true);
// [text, li, text, li, text, li, text]
console.log(deepList.childNodes);
// 3 (IE < 9) 或 7 （其他浏览器）
// IE8及之前的版本不会为包含空白符的文字创建节点（TEXT)
console.log(deepList.childNodes.length);

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length);     // 0

normalize() 方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者连接出现两个节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。

如果找到了空文本节点，则删除它

如果找到相邻的文本节点，则将它们合并为一个文本节点

本章后面还将进一步讨论方法

var html = document.documentElement;               // 取得对的引用
console.log(html == document.childNodes[0]);       // true
console.log(html == document.firstchild)           // true

所有浏览器都支持document.documentElement 和 document.boyd 属性

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

浏览器对document.doctype的支持差别很大，所以这个属性的用途很有限：

IE8及之前版本，如果存在文档类型声明，会将其错误的解释为一个注释并把它当做Comment节点；而document.doctype的值始终为null

IE9+，如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype是一个DocumentType节点，也可以通过document.firstChild或document.childNodes[0]访问同一个节点。

Safari, Chrome, Opera ：如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype是一个DocumentType节点，但该节点不会出现在document.childNodes中。

从技术上说，出现在元素外部的注释应该是算是文档的子节点。然而，不同的浏览器在是否解析这些注释以及能否正确处理他们等方面，也存在很大差异。

看起来这个页面应该有3个子节点：注释、元素、注释。从逻辑上讲，我们会认为document.childNodes中应该包含与这3个节点对应的3项。但是实际上，浏览器存在以下差异：

IE8及之前版本、Safari3.1及更高版本、Opera和Chrome 只为第一条注释创建节点，不为第二条注释创建节点。结果第一条注释就会成为document.childNodes中的第一个子节点。

IE9+，将会将两条都创建节点。

Firefox 和 Safari3.1之前的版本会完全忽略这两条注释。

多数情况下，我们都用不着在document对象上调用appendChild() removeChild() replaceChild() 方法，因为文档类型（如果存在的话）是只读的，而且它只能有一个元素子节点（该节点通常早就已经存在了）。

文档信息

作为HMLTDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。

title 包含着