摘要：年月級(jí)規(guī)范成為的推薦標(biāo)準(zhǔn)，為基本的文檔結(jié)構(gòu)及查詢提供了接口。這意味著中的對(duì)象與原生對(duì)象的行為或活動(dòng)特點(diǎn)并不一致。結(jié)果第一條注釋就會(huì)成為中的第一個(gè)子節(jié)點(diǎn)。由于跨域安全限制，來自不同子域的頁(yè)面無法通過通信。

DOM(文檔對(duì)象模型)是針對(duì)HTML和XML文檔的一個(gè)API（應(yīng)用程序編程接口）。DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加、移除和修改頁(yè)面的某一部分。DOM脫胎于Netscape及微軟公司創(chuàng)始的DHTML（動(dòng)態(tài)HTML），但現(xiàn)在它已經(jīng)成為表現(xiàn)和操作頁(yè)面標(biāo)記的真正跨平臺(tái)、語言中立方式。

1998年10月DOM 1 級(jí)規(guī)范成為W3C的推薦標(biāo)準(zhǔn)，為基本的文檔結(jié)構(gòu)及查詢提供了接口。本章主要討論與瀏覽器中的HTML頁(yè)面相關(guān)的DOM1級(jí)的特性和應(yīng)用，以及JavaScript對(duì)DOM1級(jí)的視線。

IE中的所有DOM對(duì)象都是以COM對(duì)象的形式實(shí)現(xiàn)的。這意味著IE中的DOM對(duì)象與原生JavaScript對(duì)象的行為或活動(dòng)特點(diǎn)并不一致。本章將較多的談及這些差異。

節(jié)點(diǎn)層次

  
    
  
  
    
Hello World!
  

可以將這個(gè)簡(jiǎn)單的HTML文檔視為一個(gè)層次結(jié)構(gòu)，如圖10-1所示。

文檔節(jié)點(diǎn)是每個(gè)文檔的根節(jié)點(diǎn)。在這個(gè)例子中，文檔節(jié)點(diǎn)只有一個(gè)子節(jié)點(diǎn)，既元素，我們稱之為文檔元素。

文檔元素是文檔的最外層元素，文檔中的其他所有元素都包含在文檔元素中。每個(gè)文檔只能有一個(gè)文檔元素。在HTML頁(yè)面中，文檔元素始終都是元素。在XML中，沒有預(yù)定義的元素，因此任何元素都可能成為文檔元素。

Node 類型

DOM1級(jí)定義了一個(gè) Node 接口，該接口將由 DOM 中所有節(jié)點(diǎn)類型實(shí)現(xiàn)。這個(gè)Node接口在JavaScript中是作為Node類型實(shí)現(xiàn)的；除了IE之外，在其他所有瀏覽器中都可以訪問到這個(gè)類型。

JavaScript中的所有節(jié)點(diǎn)類型都繼承自Node類型，因此所有節(jié)點(diǎn)類型都共享著相同的基本屬性和方法。

每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型。及誒單類型由在Node類型中定義的下列12個(gè)數(shù)值常量來表示，任何節(jié)點(diǎn)類型必居其一(編號(hào)為節(jié)點(diǎn)類型常量存儲(chǔ)的數(shù)值)：

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

// 通過比較上面的常量，很容易的確定節(jié)點(diǎn)類型
// 在IE中無效
if (someNode.nodeType == Node.ELEMENT_NODE) {
  console.log("Node is an element");
}

// 由于IE沒有公開 Node 類型的構(gòu)造函數(shù)
// 最好還是將 nodeType 屬性與數(shù)字比較
if (someNode.nodeType == 1) {
  console.log("Node is an element");
}

并不是所有節(jié)點(diǎn)類型都受到Web瀏覽器的支持。開發(fā)人員最常用的就是元素和文本節(jié)點(diǎn)。

nodeName 和 nodeValue 屬性

了解節(jié)點(diǎn)的具體信息，可以使用nodeName 和 nodeValue 兩個(gè)屬性。這兩個(gè)屬性的值完全取決于節(jié)點(diǎn)類型。在使用這兩個(gè)值以前，最好用上述的代碼檢查節(jié)點(diǎn)的類型。

if (someNode.nodeType == 1) {
  value = someNode.nodeName;            // nodeName的值是元素的標(biāo)簽名
}

節(jié)點(diǎn)關(guān)系

每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其中保存著一個(gè)NodeList對(duì)象。注意，可以通過方括號(hào)語法來訪問NodeList的值，而且也有length屬性，但它并不是Array的實(shí)例。

NodeList對(duì)象的獨(dú)特之處在于，它實(shí)際上是基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢的結(jié)果，因此DOM結(jié)構(gòu)的變化能夠自動(dòng)反映在NodeList對(duì)象中。我們常說NodeList是有生命、有呼吸的對(duì)象，而不是我們第一次訪它的瞬間拍攝下來的一張快照。

// 方括號(hào)和 item() 語法結(jié)果是相同的
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = comeNode.childNodes.length;

// 雖然不是Array的實(shí)例，但我們可以將它轉(zhuǎn)換成數(shù)組
// 在IE8及之前的版本中無效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);

// 由于IE8及更早版本將 NodeList 實(shí)現(xiàn)為一個(gè) COM 對(duì)象
// 必須手動(dòng)枚舉所有成員，才能轉(zhuǎn)換成數(shù)組
function convertToArray(nodes) {
  var array = null;
  try {
    array = Array.prototype.slice.call(nodes, 0);      // 針對(duì)非IE瀏覽器
  } catch (ex) {
    array = new Array();
    for (var i=0, len=nodes.length; i < len; i++) {
      array.push(nodes[i]);
    }
  }

  return array;
}

每個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性，指向文檔中的父節(jié)點(diǎn)。

包含在childNodes中的所有節(jié)點(diǎn)都具有相同的父節(jié)點(diǎn)，而相互之間是同胞節(jié)點(diǎn)。

通過每個(gè)節(jié)點(diǎn)的previousSibling 和 nextSibling 屬性可以訪問同一列表中的其他節(jié)點(diǎn)。列表第一個(gè)節(jié)點(diǎn)previousSibling為null，列表最后一個(gè)nextSibling為null，當(dāng)然如果列表只有一個(gè)節(jié)點(diǎn)，那么兩個(gè)都是null。

父節(jié)點(diǎn)的firstChild和lastChild屬性分別指向第一個(gè)和最后一個(gè)。如果列表沒有節(jié)點(diǎn)，那么兩個(gè)屬性都是null。

hasChildNodes()也是一個(gè)非常有用的方法，當(dāng)查詢節(jié)點(diǎn)存在子節(jié)點(diǎn)時(shí)返回true，不存在返回false。這是比查詢childNodes.length更簡(jiǎn)單的方法。

所有節(jié)點(diǎn)都有的最后一個(gè)屬性是ownerDocument，該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn)。這種關(guān)系表示的是任何節(jié)點(diǎn)都屬于它所在的文檔，任何節(jié)點(diǎn)都不能同時(shí)存在兩個(gè)或更多個(gè)文檔中。通過這個(gè)屬性，我們可以不必在節(jié)點(diǎn)層次中通過層層回溯達(dá)到頂端，而是可以直接訪問文檔節(jié)點(diǎn)。

操作節(jié)點(diǎn)

因?yàn)殛P(guān)系指針都是只讀的，所以DOM提供了一些操作節(jié)點(diǎn)的方法 。

最常用的方法是appendChild()，用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)，執(zhí)行后，方法返回新增的節(jié)點(diǎn)。

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

如果需要把節(jié)點(diǎn)放在childNodes列表中某個(gè)特定的位置上，而不是放在末尾，可以使用insertBefore()方法。這個(gè)方法接收兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)（previousSibling)，同時(shí)被方法返回。如果參照節(jié)點(diǎn)是null，則 insertBefore() 和 appendChild() 執(zhí)行相同操作。

// 插入后成為最后一個(gè)子節(jié)點(diǎn)
var returnedNode = someNode.insertBefore(newNode, null);

// 插入后成為第一個(gè)子節(jié)點(diǎn)
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);

// 插入后在最后一個(gè)子節(jié)點(diǎn)前面
var returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

replaceChild() 替換節(jié)點(diǎn)。同樣接收兩個(gè)參數(shù)，插入的節(jié)點(diǎn)和參照節(jié)點(diǎn)。插入新的節(jié)點(diǎn)并將參照節(jié)點(diǎn)從文檔樹中移除，新的節(jié)點(diǎn)會(huì)從被替換的節(jié)點(diǎn)復(fù)制所有關(guān)系指針。盡管從技術(shù)上講，被替換的節(jié)點(diǎn)仍然在文檔中，但它在文檔中的位置已經(jīng)不存在了。

removeChild() 移除節(jié)點(diǎn)。被移除的節(jié)點(diǎn)仍然在文檔中，但它在文檔中的位置已經(jīng)不存在了。

以上四個(gè)方法必須先取得操作節(jié)點(diǎn)的父節(jié)點(diǎn)（代碼示例中是someNode）。在不存在子節(jié)點(diǎn)的節(jié)點(diǎn)上調(diào)用以上方法，會(huì)導(dǎo)致錯(cuò)誤。

其他方法

還有兩個(gè)方法是所有節(jié)點(diǎn)都有的。

cloneNode() 用于創(chuàng)建調(diào)用這個(gè)方法的節(jié)點(diǎn)的一個(gè)完全相同的副本。接收一個(gè)布爾值參數(shù)，表示是否執(zhí)行深復(fù)制。

傳入true。執(zhí)行深復(fù)制，復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹

傳入false。執(zhí)行淺復(fù)制，即只復(fù)制節(jié)點(diǎn)本身。

復(fù)制返回的節(jié)點(diǎn)副本屬于文檔所有，但并沒有為它制定父節(jié)點(diǎn)。因此這個(gè)節(jié)點(diǎn)副本就成為了一個(gè)“孤兒”，除非通過 appendChild() insertBefore() replaceChild() 將它添加到文檔中。

IE8及之前的版本不會(huì)為包含空白符的文字創(chuàng)建節(jié)點(diǎn)（TEXT)

clone() 方法不會(huì)復(fù)制添加到DOM節(jié)點(diǎn)中的JavaScript屬性，例如時(shí)間處理程序。這個(gè)方法只復(fù)制特性、（在明確指定的情況下也復(fù)制）子節(jié)點(diǎn)，其他一切都不會(huì)復(fù)制。

IE 會(huì)復(fù)制事件處理程序，所以我們建議在復(fù)制之前最好先移出事件處理程序。

  
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及之前的版本不會(huì)為包含空白符的文字創(chuàng)建節(jié)點(diǎn)（TEXT)
console.log(deepList.childNodes.length);

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

normalize() 方法唯一的作用就是處理文檔樹中的文本節(jié)點(diǎn)。由于解析器的實(shí)現(xiàn)或DOM操作等原因，可能會(huì)出現(xiàn)文本節(jié)點(diǎn)不包含文本，或者連接出現(xiàn)兩個(gè)節(jié)點(diǎn)的情況。當(dāng)在某個(gè)節(jié)點(diǎn)上調(diào)用這個(gè)方法時(shí)，就會(huì)在該節(jié)點(diǎn)的后代節(jié)點(diǎn)中查找上述兩種情況。

如果找到了空文本節(jié)點(diǎn)，則刪除它

如果找到相鄰的文本節(jié)點(diǎn)，則將它們合并為一個(gè)文本節(jié)點(diǎn)

本章后面還將進(jìn)一步討論方法

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

所有瀏覽器都支持document.documentElement 和 document.boyd 屬性

Document另一個(gè)可能的子節(jié)點(diǎn)是DocumentType。通常將標(biāo)簽看成一個(gè)與文檔其他部分不同的實(shí)體，可以通過doctype屬性（在瀏覽器中是document.doctype）來訪問信息。

瀏覽器對(duì)document.doctype的支持差別很大，所以這個(gè)屬性的用途很有限：

IE8及之前版本，如果存在文檔類型聲明，會(huì)將其錯(cuò)誤的解釋為一個(gè)注釋并把它當(dāng)做Comment節(jié)點(diǎn)；而document.doctype的值始終為null

IE9+，如果存在文檔類型聲明，則將其作為文檔的第一個(gè)子節(jié)點(diǎn)；document.doctype是一個(gè)DocumentType節(jié)點(diǎn)，也可以通過document.firstChild或document.childNodes[0]訪問同一個(gè)節(jié)點(diǎn)。

Safari, Chrome, Opera ：如果存在文檔類型聲明，則將其解析，但不作為文檔的子節(jié)點(diǎn)。document.doctype是一個(gè)DocumentType節(jié)點(diǎn)，但該節(jié)點(diǎn)不會(huì)出現(xiàn)在document.childNodes中。

從技術(shù)上說，出現(xiàn)在元素外部的注釋應(yīng)該是算是文檔的子節(jié)點(diǎn)。然而，不同的瀏覽器在是否解析這些注釋以及能否正確處理他們等方面，也存在很大差異。

看起來這個(gè)頁(yè)面應(yīng)該有3個(gè)子節(jié)點(diǎn)：注釋、元素、注釋。從邏輯上講，我們會(huì)認(rèn)為document.childNodes中應(yīng)該包含與這3個(gè)節(jié)點(diǎn)對(duì)應(yīng)的3項(xiàng)。但是實(shí)際上，瀏覽器存在以下差異：

IE8及之前版本、Safari3.1及更高版本、Opera和Chrome 只為第一條注釋創(chuàng)建節(jié)點(diǎn)，不為第二條注釋創(chuàng)建節(jié)點(diǎn)。結(jié)果第一條注釋就會(huì)成為document.childNodes中的第一個(gè)子節(jié)點(diǎn)。

IE9+，將會(huì)將兩條都創(chuàng)建節(jié)點(diǎn)。

Firefox 和 Safari3.1之前的版本會(huì)完全忽略這兩條注釋。

多數(shù)情況下，我們都用不著在document對(duì)象上調(diào)用appendChild() removeChild() replaceChild() 方法，因?yàn)槲臋n類型（如果存在的話）是只讀的，而且它只能有一個(gè)元素子節(jié)點(diǎn)（該節(jié)點(diǎn)通常早就已經(jīng)存在了）。

文檔信息

作為HMLTDocument的一個(gè)實(shí)例，document對(duì)象還有一些標(biāo)準(zhǔn)的Document對(duì)象所沒有的屬性。

title 包含著