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

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

1998年10月DOM 1 級規(guī)范成為W3C的推薦標準，為基本的文檔結構及查詢提供了接口。本章主要討論與瀏覽器中的HTML頁面相關的DOM1級的特性和應用，以及JavaScript對DOM1級的視線。

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

節(jié)點層次

  
    
  
  
    
Hello World!
  

可以將這個簡單的HTML文檔視為一個層次結構，如圖10-1所示。

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

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

Node 類型

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

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

每個節(jié)點都有一個nodeType屬性，用于表明節(jié)點的類型。及誒單類型由在Node類型中定義的下列12個數(shù)值常量來表示，任何節(jié)點類型必居其一(編號為節(jié)點類型常量存儲的數(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é)點類型
// 在IE中無效
if (someNode.nodeType == Node.ELEMENT_NODE) {
  console.log("Node is an element");
}

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

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

nodeName 和 nodeValue 屬性

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

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

節(jié)點關系

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

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

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

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

// 由于IE8及更早版本將 NodeList 實現(xiàn)為一個 COM 對象
// 必須手動枚舉所有成員，才能轉換成數(shù)組
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;
}

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

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

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

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

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

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

操作節(jié)點

因為關系指針都是只讀的，所以DOM提供了一些操作節(jié)點的方法 。

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

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

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

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

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

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

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

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

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

其他方法

還有兩個方法是所有節(jié)點都有的。

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

傳入true。執(zhí)行深復制，復制節(jié)點及其整個子節(jié)點樹

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

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

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

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

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

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

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

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

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

本章后面還將進一步討論方法

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

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

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

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

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

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

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

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

看起來這個頁面應該有3個子節(jié)點：注釋、元素、注釋。從邏輯上講，我們會認為document.childNodes中應該包含與這3個節(jié)點對應的3項。但是實際上，瀏覽器存在以下差異：

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

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

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

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

文檔信息

作為HMLTDocument的一個實例，document對象還有一些標準的Document對象所沒有的屬性。

title 包含著