這里說的是XML的這些對象，而HTML是繼承這些對象的，并進行了擴展。如Document對象，

Node對象

它是一個節點對象，代表文檔樹中的一個節點。是所有節點類型的基類

Node對象是整個DOM的主要類型。節點對象代表文檔樹中的一個單獨的節點

通過childNodes獲取NodeList對象（即節點列表）

Node對象的屬性和方法主要是操作節點的，獲取上下左右的節點，增刪改查復制節點。

具體參照?http://www.w3school.com.cn/xmldom/dom_node.asp

js中的應用：

var d = document.getElementsByTagName('div');

var node = d.item(0).childNodes.item(0);

node instanceof Node? ??//true

d.item(0).childNodes instanceof Node //false
d.item(0).childNodes instanceof NodeList? ?//true

?

NodeList對象

它代表一個有順序的節點列表，節點列表可保持自身的更新，如果節點列表或XML文檔中的某個元素被刪除或添加，列表也會被自動更新。

屬性：

length? 返回節點列表中的節點數目

方法：

item()? 返回節點列表中處于指定的索引節點

?

Document對象（Document類型）

Document對象是一棵文檔樹的根，可為我們提供對文檔數據的最初的訪問入口。

包括元素節點、文本節點、注釋、處理指令等，document對象同樣提供了創建這些對象的方法。

所以Document對象是一個對象。可以使用new操作符。

http://www.w3school.com.cn/xmldom/dom_document.asp

Document類型是繼承Node對象的屬性和方法，并且新增了屬性和方法。

在瀏覽器中document對象是HTMLDocument（繼承Document類型）的一個實例

?

HTMLDocument對象

從上可以看出HTMLDocument繼承自Document對象

表示HTML文檔樹的根，它是一個接口（？有待考察，因為不能new一個HTMLDocument()），提供了對HTML層級的訪問。

HTMLDocument接口對DOM Document接口進行了擴展，定義了HTML專用的屬性和方法。

很多屬性和方法都是HTMLCollection對象（實際上是可以用數組或名稱索引的只讀數組），其中保存了對錨、表單、鏈接以及其他腳本元素的引用。

注意，在 1 級 DOM 中，HTMLDocument 定義了一個名為?getElementById()?的非常有用的方法。在 2 級 DOM 中，該方法已經被轉移到了 Document 接口，它現在由 HTMLDocument 繼承而不是由它定義了。

?

HTMLCollection對象

它是一個接口，表示HTML元素的集合，它提供了可以遍歷列表的方法和屬性。

HTML DOM 中的HTMLCollection是“活”的，如果基本的文檔改變時，那些改變通過所有HTMLCollection對象會立即顯示出來。

下面的每個項目（以及它們指定的屬性）都返回HTMLCollection對象實例

Document（images，applets，links，forms，anchors）

form（elements）

map（areas）

select（options）

table（rows，tBodies）

tableSection（rows）

row（cells）

HTMLDocument接口的許多屬性都是HTMLCollection對象，它提供了訪問諸如表單、圖像和鏈接等文檔元素的便捷方式。form.elements和select.options都是HTMLCollection對象，HTMLCollection還提供了遍歷Table的各行以及TableRow的各個單元格的一種方便方法。

HTMLCollection 對象是只讀的，不能給它添加新元素，即使采用 JavaScript 數組語法也是如此。

HTMLCollection 對象和?NodeList 對象很相似，但前者可能既能用名稱索引也能用數字索引。

HTMLCollection對象的屬性

cssRules? ?只讀屬性，返回指示列表長度的整數（即集合中的元素數）

方法

item()，返回集合中指定位置的元素（節點）

namedItem()，返回集合中name屬性或id屬性具有指定值的元素（節點）

?

HTML中的實際應用：

通過document實例的方法取到的都是HTMLCollection對象

var d = document.getElementsByTagName('div')

d.__proto__? ? ?返回的是HTMLCollection對象

d.item(0).__proto__? ?返回的是HTMLDivElement對象

d.item(0).childNodes.__proto__? ? 返回的是NodeList對象。也就是childNodes才是NodeList對象。

html中的NodeList還有forEach方法

?

var d = document.getElementsByTagName('div');

var node = d.item(0).childNodes.item(0);

d instanceof HTMLCollection? ? //true
d是一個HTMLCollection的集合
d instanceof HTMLDocument? ? //false

Document, HTMLDocument 是頂部節點，所以其他節點都不是Document的實例

d.item(0).childNodes instanceof NodeList? ?//true
d.item(0).childNodes instanceof HTMLCollection? //false
通過document的方法如document.getElementsByTagName('img')等取到的是HTMLCollection對象，通過childNodes取到的是NodeList對象，這兩個都是列表

node instanceof Element? ?//true? ，node是div元素

node instanceof Node? ? ? //true

這里有些是自己的理解，如有不對之處請指出。

?

轉載于:https://www.cnblogs.com/wenwenli/p/Node_NodeList_Document_HTMLCollection.html

總結

以上是生活随笔為你收集整理的Node，Document，HTMLDocument，HTMLCollection解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。