摘要：節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。此外，包含在列表中的每個節點相互之間都是同胞節點。在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。

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

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

    
        
    
    
        
Hello World!
    

可以將這個簡單的 HTML 文檔表示為一個層次結構，如圖下圖所示。

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

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

DOM1 級定義了一個 Node 接口，該接口將由 DOM 中的所有節點類型實現。這個 Node 接口在 JavaScript 中是作為 Node 類型實現的；除了 IE 之外，在其他所有瀏覽器中都可以訪問到這個類型。JavaScript 中的所有節點類型都繼承自 Node 類型，因此所有節點類型都共享著相同的基本屬性和方法。

每個節點都有一個 nodeType 屬性，用于表明節點的類型。節點類型由在 Node 類型中定義的下列12個數值常量來表示，任何節點類型必居其一：

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

通過比較上面這些常量，可以很容易地確定節點的類型，例如：

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

這個例子比較了 someNode.nodeType 與 Node.ELEMENT_NODE 常量。如果二者相等，則意味著 someNode 確實是一個元素。然而，由于 IE 沒有公開 Node 類型的構造函數，因此上面的代碼在 IE 中會導致錯誤。為了確保跨瀏覽器兼容，最好還是將 nodeType 屬性與數字值進行比較，如下所示：

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

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

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

nodeType：顯示節點的類型

nodeName：顯示節點的名稱

nodeValue：顯示節點的值

attributes：獲取一個屬性節點

firstChild：表示某一節點的第一個節點

lastChild：表示某一節點的最后一個子節點

childNodes：表示所在節點的所有子節點

parentNode：表示所在節點的父節點

nextSibling：緊挨著當前節點的下一個節點

previousSibling：緊挨著當前節點的上一個節點

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

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

在這個例子中，首先檢查節點類型，看它是不是一個元素。如果是，則取得并保存 nodeName 的值。對于元素節點，nodeName 中保存的始終都是元素的標簽名，而 nodeValue 的值則始終為 null。

文檔中所有的節點之間都存在這樣或那樣的關系。節點間的各種關系可以用傳統的家族關系來描述，相當于把文檔樹比喻成家譜。

每個節點都有一個 childNodes 屬性，其中保存著一個 NodeList 對象。NodeList 是一種類數組對象，用于保存一組有序的節點，可以通過位置來訪問這些節點。請注意，雖然可以通過方括號語法來訪問 NodeList 的值，而且這個對象也有 length 屬性，但它并不是 Array 的實例。NodeList 對象的獨特之處在于，它實際上是基于 DOM 結構動態執行查詢的結果，因此 DOM 結構的變化能夠自動反映在 NodeList 對象中。

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

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

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

每個節點都有一個 parentNode 屬性，該屬性指向文檔樹中的父節點。包含在 childNodes 列表中的所有節點都具有相同的父節點，因此它們的 parentNode 屬性都指向同一個節點。此外，包含在 childNodes 列表中的每個節點相互之間都是同胞節點。通過使用列表中每個節點的 previousSibling 和 nextSibling 屬性，可以訪問同一列表中的其他節點。列表中第一個節點的 previousSibling 屬性值為 null，而列表中最后一個節點的 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.");
}

當然，如果列表中只有一個節點，那么該節點的 nextSibling 和 previousSibling 都為 null。

父節點與其第一個和最后一個子節點之間也存在特殊關系。父節點的 firstChild 和 lastChild 屬性分別指向其 childNodes 列表中的第一個和最后一個節點。其中，someNode.firstChild 的值始終等于 someNode.childNodes[0]，而 someNode.lastChild 的值始終等于 someNode.childNodes [someNode.childNodes.length-1]。在只有一個子節點的情況下， firstChild 和 lastChild 指向同一個節點。如果沒有子節點，那么 firstChild 和 lastChild 的值均為 null。明確這些關系能夠對我們查找和訪問文檔結構中的節點提供極大的便利。下圖形象地展示了上述關系。

在反映這些關系的所有屬性當中，childNodes 屬性與其他屬性相比更方便一些，因為只須使用簡單的關系指針，就可以通過它訪問文檔樹中的任何節點。另外，hasChildNodes() 也是一個非常有用的方法，這個方法在節點包含一或多個子節點的情況下返回 true；應該說，這是比查詢 childNodes 列表的 length 屬性更簡單的方法。

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

因為關系指針都是只讀的，所以 DOM 提供了一些操作節點的方法。其中，最常用的方法是 appendChild()，用于向 childNodes 列表的末尾添加一個節點。添加節點后，childNodes 的新增節點、父節點及以前的最后一個子節點的關系指針都會相應地得到更新。更新完成后，appendChild() 返回新增的節點。來看下面的例子：

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

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

// someNode 有多個子節點
var returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode == someNode.firstChild);   // false
console.log(returnedNode == someNode.lastChild);    // true

如果需要把節點放在 childNodes 列表中某個特定的位置上，而不是放在末尾，那么可以使用 insertBefore() 方法。這個方法接受兩個參數：要插入的節點和作為參照的節點。插入節點后，被插入的節點會變成參照節點的前一個同胞節點 previousSibling，同時被方法返回。如果參照節點是 null，則 insertBefore() 與 appendChild() 執行相同的操作，如下面的例子所示。

// 插入后成為最后一個子節點
returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode == someNode.lastChild);   // true

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

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

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

// 替換第一個子節點
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

// 替換最后一個子節點
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

在使用 replaceChild() 插入一個節點時，該節點的所有關系指針都會從被它替換的節點復制過來。盡管從技術上講，被替換的節點仍然還在文檔中，但它在文檔中已經沒有了自己的位置。

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

// 移除第一個子節點
var formerFirstChild = someNode.removeChild(someNode.firstChild);

// 移除最后一個子節點
var formerLastChild = someNode.removeChild(someNode.lastChild);

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

前面介紹的四個方法操作的都是某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點（使用 parentNode 屬性）。另外，并不是所有類型的節點都有子節點，如果在不支持子節點的節點上調用了這些方法，將會導致錯誤發生。

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 對象。通過這個文檔對象，不僅可以取得與頁面有關的信息，而且還能操作頁面的外觀及其底層結構。

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

這個頁面在經過瀏覽器解析后，其文檔中只包含一個子節點，即 html 元素。可以通過 documentElement 或 childNodes 列表來訪問這個元素，如下所示。

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

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

作為 HTMLDocument 的實例，document 對象還有一個 body 屬性，直接指向 元素。因為開發人員經常要使用這個元素，所以 document.body 在 JavaScript 代碼中出現的頻率非常高，其用法如下。

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

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

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

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

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

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

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

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

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

作為 HTMLDocument 的一個實例，document 對象還有一些標準的 Document 對象所沒有的屬性。這些屬性提供了 document 對象所表現的網頁的一些信息。其中第一個屬性就是 title，包含著

The current date and time is:

    


    ");
    

aaabbbccc

aaabbbccc

aaabbbccc

關注微信公眾號「劼哥舍」回復「答案」，獲取關卡詳解。  
關注 https://github.com/stone0090/javascript-lessons，獲取最新動態。