摘要：節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹形結(jié)構(gòu)。此外，包含在列表中的每個(gè)節(jié)點(diǎn)相互之間都是同胞節(jié)點(diǎn)。在瀏覽器中，對象是繼承自類型的一個(gè)實(shí)例，表示整個(gè)頁面。

DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個(gè) API。DOM 描繪了一個(gè)層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。

DOM 可以將任何 HTML 或 XML 文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)分為幾種不同的類型，每種類型分別表示文檔中不同的信息及（或）標(biāo)記。每個(gè)節(jié)點(diǎn)都擁有各自的特點(diǎn)、數(shù)據(jù)和方法，另外也與其他節(jié)點(diǎn)存在某種關(guān)系。節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹形結(jié)構(gòu)。以下面的 HTML 為例：

    
        
    
    
        
Hello World!
    

可以將這個(gè)簡單的 HTML 文檔表示為一個(gè)層次結(jié)構(gòu)，如圖下圖所示。

在這個(gè)例子中，文檔元素是文檔的最外層元素，文檔中的其他所有元素都包含在文檔元素中。每個(gè)文檔只能有一個(gè)文檔元素。

每一段標(biāo)記都可以通過樹中的一個(gè)節(jié)點(diǎn)來表示：HTML 元素通過元素節(jié)點(diǎn)表示，特性（attribute）通過特性節(jié)點(diǎn)表示，文檔類型通過文檔類型節(jié)點(diǎn)表示，而注釋則通過注釋節(jié)點(diǎn)表示。總共有12種節(jié)點(diǎn)類型，這些類型都繼承自一個(gè)基類型。

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)的類型。節(jié)點(diǎn)類型由在 Node 類型中定義的下列12個(gè)數(shù)值常量來表示，任何節(jié)點(diǎn)類型必居其一：

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)。

通過比較上面這些常量，可以很容易地確定節(jié)點(diǎn)的類型，例如：

if (someNode.nodeType == Node.ELEMENT_NODE){   // 在IE中無效
    console.log("Node is an element.");
}

這個(gè)例子比較了 someNode.nodeType 與 Node.ELEMENT_NODE 常量。如果二者相等，則意味著 someNode 確實(shí)是一個(gè)元素。然而，由于 IE 沒有公開 Node 類型的構(gòu)造函數(shù)，因此上面的代碼在 IE 中會(huì)導(dǎo)致錯(cuò)誤。為了確?？鐬g覽器兼容，最好還是將 nodeType 屬性與數(shù)字值進(jìn)行比較，如下所示：

if (someNode.nodeType == 1){    // 適用于所有瀏覽器
    console.log("Node is an element.");
}

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

Node 常用屬性主要有以下10個(gè)，接下來我們會(huì)著重講解部分屬性。

nodeType：顯示節(jié)點(diǎn)的類型

nodeName：顯示節(jié)點(diǎn)的名稱

nodeValue：顯示節(jié)點(diǎn)的值

attributes：獲取一個(gè)屬性節(jié)點(diǎn)

firstChild：表示某一節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)

lastChild：表示某一節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

childNodes：表示所在節(jié)點(diǎn)的所有子節(jié)點(diǎn)

parentNode：表示所在節(jié)點(diǎn)的父節(jié)點(diǎn)

nextSibling：緊挨著當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)

previousSibling：緊挨著當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)

要了解節(jié)點(diǎn)的具體信息，可以使用 nodeName 和 nodeValue 這兩個(gè)屬性。這兩個(gè)屬性的值完全取決于節(jié)點(diǎn)的類型。在使用這兩個(gè)值以前，最好是像下面這樣先檢測一下節(jié)點(diǎn)的類型。

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

在這個(gè)例子中，首先檢查節(jié)點(diǎn)類型，看它是不是一個(gè)元素。如果是，則取得并保存 nodeName 的值。對于元素節(jié)點(diǎn)，nodeName 中保存的始終都是元素的標(biāo)簽名，而 nodeValue 的值則始終為 null。

文檔中所有的節(jié)點(diǎn)之間都存在這樣或那樣的關(guān)系。節(jié)點(diǎn)間的各種關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述，相當(dāng)于把文檔樹比喻成家譜。

每個(gè)節(jié)點(diǎn)都有一個(gè) childNodes 屬性，其中保存著一個(gè) NodeList 對象。NodeList 是一種類數(shù)組對象，用于保存一組有序的節(jié)點(diǎn)，可以通過位置來訪問這些節(jié)點(diǎn)。請注意，雖然可以通過方括號(hào)語法來訪問 NodeList 的值，而且這個(gè)對象也有 length 屬性，但它并不是 Array 的實(shí)例。NodeList 對象的獨(dú)特之處在于，它實(shí)際上是基于 DOM 結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢的結(jié)果，因此 DOM 結(jié)構(gòu)的變化能夠自動(dòng)反映在 NodeList 對象中。

下面的例子展示了如何訪問保存在 NodeList 中的節(jié)點(diǎn)——可以通過方括號(hào)，也可以使用 item() 方法。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

無論使用方括號(hào)還是使用 item() 方法都沒有問題，但使用方括號(hào)語法看起來與訪問數(shù)組相似，因此頗受一些開發(fā)人員的青睞。另外，要注意 length 屬性表示的是訪問 NodeList 的那一刻，其中包含的節(jié)點(diǎn)數(shù)量。

每個(gè)節(jié)點(diǎn)都有一個(gè) parentNode 屬性，該屬性指向文檔樹中的父節(jié)點(diǎn)。包含在 childNodes 列表中的所有節(jié)點(diǎn)都具有相同的父節(jié)點(diǎn)，因此它們的 parentNode 屬性都指向同一個(gè)節(jié)點(diǎn)。此外，包含在 childNodes 列表中的每個(gè)節(jié)點(diǎn)相互之間都是同胞節(jié)點(diǎn)。通過使用列表中每個(gè)節(jié)點(diǎn)的 previousSibling 和 nextSibling 屬性，可以訪問同一列表中的其他節(jié)點(diǎn)。列表中第一個(gè)節(jié)點(diǎn)的 previousSibling 屬性值為 null，而列表中最后一個(gè)節(jié)點(diǎn)的 nextSibling 屬性的值同樣也為 null，如下面的例子所示：

if (someNode.nextSibling === null){
    console.log("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
    console.log("First node in the parent’s childNodes list.");
}

當(dāng)然，如果列表中只有一個(gè)節(jié)點(diǎn)，那么該節(jié)點(diǎn)的 nextSibling 和 previousSibling 都為 null。

父節(jié)點(diǎn)與其第一個(gè)和最后一個(gè)子節(jié)點(diǎn)之間也存在特殊關(guān)系。父節(jié)點(diǎn)的 firstChild 和 lastChild 屬性分別指向其 childNodes 列表中的第一個(gè)和最后一個(gè)節(jié)點(diǎn)。其中，someNode.firstChild 的值始終等于 someNode.childNodes[0]，而 someNode.lastChild 的值始終等于 someNode.childNodes [someNode.childNodes.length-1]。在只有一個(gè)子節(jié)點(diǎn)的情況下， firstChild 和 lastChild 指向同一個(gè)節(jié)點(diǎn)。如果沒有子節(jié)點(diǎn)，那么 firstChild 和 lastChild 的值均為 null。明確這些關(guān)系能夠?qū)ξ覀儾檎液驮L問文檔結(jié)構(gòu)中的節(jié)點(diǎn)提供極大的便利。下圖形象地展示了上述關(guān)系。

在反映這些關(guān)系的所有屬性當(dāng)中，childNodes 屬性與其他屬性相比更方便一些，因?yàn)橹豁毷褂煤唵蔚年P(guān)系指針，就可以通過它訪問文檔樹中的任何節(jié)點(diǎn)。另外，hasChildNodes() 也是一個(gè)非常有用的方法，這個(gè)方法在節(jié)點(diǎn)包含一或多個(gè)子節(jié)點(diǎn)的情況下返回 true；應(yīng)該說，這是比查詢 childNodes 列表的 length 屬性更簡單的方法。

所有節(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)。

因?yàn)殛P(guān)系指針都是只讀的，所以 DOM 提供了一些操作節(jié)點(diǎn)的方法。其中，最常用的方法是 appendChild()，用于向 childNodes 列表的末尾添加一個(gè)節(jié)點(diǎn)。添加節(jié)點(diǎn)后，childNodes 的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。更新完成后，appendChild() 返回新增的節(jié)點(diǎn)。來看下面的例子：

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

如果傳入到 appendChild() 中的節(jié)點(diǎn)已經(jīng)是文檔的一部分了，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移到新位置。即使可以將 DOM 樹看成是由一系列指針連接起來的，但任何 DOM 節(jié)點(diǎn)也不能同時(shí)出現(xiàn)在文檔中的多個(gè)位置上。因此，如果在調(diào)用 appendChild() 時(shí)傳入了父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，那么該節(jié)點(diǎn)就會(huì)成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如下面的例子所示。

// someNode 有多個(gè)子節(jié)點(diǎn)
var returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode == someNode.firstChild);   // false
console.log(returnedNode == someNode.lastChild);    // 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)
returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode == someNode.lastChild);   // true

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

// 插入到最后一個(gè)子節(jié)點(diǎn)前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
console.log(newNode == someNode.childNodes[someNode.childNodes.length-2]); // true

前面介紹的 appendChild() 和 insertBefore() 方法都只插入節(jié)點(diǎn)，不會(huì)移除節(jié)點(diǎn)。而下面要介紹的 replaceChild() 方法接受的兩個(gè)參數(shù)是：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。要替換的節(jié)點(diǎn)將由這個(gè)方法返回并從文檔樹中被移除，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。來看下面的例子。

// 替換第一個(gè)子節(jié)點(diǎn)
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

// 替換最后一個(gè)子節(jié)點(diǎn)
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

在使用 replaceChild() 插入一個(gè)節(jié)點(diǎn)時(shí)，該節(jié)點(diǎn)的所有關(guān)系指針都會(huì)從被它替換的節(jié)點(diǎn)復(fù)制過來。盡管從技術(shù)上講，被替換的節(jié)點(diǎn)仍然還在文檔中，但它在文檔中已經(jīng)沒有了自己的位置。

如果只想移除而非替換節(jié)點(diǎn)，可以使用 removeChild() 方法。這個(gè)方法接受一個(gè)參數(shù)，即要移除的節(jié)點(diǎn)。被移除的節(jié)點(diǎn)將成為方法的返回值，如下面的例子所示。

// 移除第一個(gè)子節(jié)點(diǎn)
var formerFirstChild = someNode.removeChild(someNode.firstChild);

// 移除最后一個(gè)子節(jié)點(diǎn)
var formerLastChild = someNode.removeChild(someNode.lastChild);

與使用 replaceChild() 方法一樣，通過 removeChild() 移除的節(jié)點(diǎn)仍然為文檔所有，只不過在文檔中已經(jīng)沒有了自己的位置。

前面介紹的四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，也就是說，要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)（使用 parentNode 屬性）。另外，并不是所有類型的節(jié)點(diǎn)都有子節(jié)點(diǎn)，如果在不支持子節(jié)點(diǎn)的節(jié)點(diǎn)上調(diào)用了這些方法，將會(huì)導(dǎo)致錯(cuò)誤發(fā)生。

JavaScript 通過 Document 類型表示文檔。在瀏覽器中，document 對象是 HTMLDocument（繼承自 Document 類型）的一個(gè)實(shí)例，表示整個(gè) HTML 頁面。而且，document 對象是 window 對象的一個(gè)屬性，因此可以將其作為全局對象來訪問。Document 節(jié)點(diǎn)具有下列特征：

nodeType 的值為9；

nodeName 的值為 "#document"；

nodeValue 的值為 null；

parentNode 的值為 null；

ownerDocument 的值為 null；

其子節(jié)點(diǎn)可能是一個(gè) DocumentType（最多一個(gè)）、Element（最多一個(gè)）、ProcessingInstruction 或 Comment。

Document 類型可以表示 HTML 頁面或者其他基于 XML 的文檔。不過，最常見的應(yīng)用還是作為 HTMLDocument 實(shí)例的 document 對象。通過這個(gè)文檔對象，不僅可以取得與頁面有關(guān)的信息，而且還能操作頁面的外觀及其底層結(jié)構(gòu)。

雖然 DOM 標(biāo)準(zhǔn)規(guī)定 Document 節(jié)點(diǎn)的子節(jié)點(diǎn)可以是DocumentType、Element、ProcessingInstruction 或 Comment，但還有兩個(gè)內(nèi)置的訪問其子節(jié)點(diǎn)的快捷方式。第一個(gè)就是documentElement 屬性，該屬性始終指向 HTML 頁面中的 html 元素。另一個(gè)就是通過 childNodes 列表訪問文檔元素，但通過 documentElement 屬性則能更快捷、更直接地訪問該元素。以下面這個(gè)簡單的頁面為例。

這個(gè)頁面在經(jīng)過瀏覽器解析后，其文檔中只包含一個(gè)子節(jié)點(diǎn)，即 html 元素?？梢酝ㄟ^ documentElement 或 childNodes 列表來訪問這個(gè)元素，如下所示。

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

這個(gè)例子說明，documentElement、firstChild 和 childNodes[0] 的值相同，都指向 元素。

作為 HTMLDocument 的實(shí)例，document 對象還有一個(gè) body 屬性，直接指向 元素。因?yàn)殚_發(fā)人員經(jīng)常要使用這個(gè)元素，所以 document.body 在 JavaScript 代碼中出現(xiàn)的頻率非常高，其用法如下。

var body = document.body;    // 取得對的引用

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

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

var doctype = document.doctype;     // 取得對的引用

瀏覽器對 document.doctype 的支持差別很大，可以給出如下總結(jié)。

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

IE9+ 及 Firefox：如果存在文檔類型聲明，則將其作為文檔的第一個(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 中。

由于瀏覽器對 document.doctype 的支持不一致，因此這個(gè)屬性的用處很有限。

作為 HTMLDocument 的一個(gè)實(shí)例，document 對象還有一些標(biāo)準(zhǔn)的 Document 對象所沒有的屬性。這些屬性提供了 document 對象所表現(xiàn)的網(wǎng)頁的一些信息。其中第一個(gè)屬性就是 title，包含著

The current date and time is:

    


    ");
    

aaabbbccc

aaabbbccc

aaabbbccc

關(guān)注微信公眾號(hào)「劼哥舍」回復(fù)「答案」，獲取關(guān)卡詳解。  
關(guān)注 https://github.com/stone0090/javascript-lessons，獲取最新動(dòng)態(tài)。