這個問題如果不是基于原生js寫組件，可能仍然不明不白，既然遇到了，就整理一下。

一、Document，Node，Element的關系
1，Document 對象
Document 對象是一棵文檔樹的根，可為我們提供對文檔數據的最初（或最頂層）的訪問入口。
用于元素節點、文本節點、注釋、處理指令等均無法存在于 document 之外，document 對象同樣提供了創建這些對象的方法。Node 對象提供了一個 ownerDocument 屬性，此屬性可把它們與在其中創建它們的 Document 關聯起來。

屬性：documentElement, doctype, nodeType, childNodes, firstChild
方法：createElement(), createTextNode(), getElementByXX(),



2，Node 對象 - 節點對象代表文檔樹中的一個節點。
Node 對象是整個 DOM 的主要數據類型。
節點對象代表文檔樹中的一個單獨的節點。
節點可以是元素節點、屬性節點、文本節點，或者也可以是“節點類型”那一節中所介紹的任何一種節點。
請注意，雖然所有的對象均能繼承用于處理父節點和子節點的屬性和方法，但是并不是所有的對象都擁有父節點或子節點。例如，文本節點不能擁有子節點，所以向類似的節點添加子節點就會導致 DOM 錯誤。

nodeType, nodeName, nodeValue
屬性：baseURI, ownerDocument, textConent, childNode, firstChild
方法：appendChild(), cloneNode(), isEqualNode(), hasAttributes(), normalize()

完整版
屬性：nodeName/nodeType/nodeValue, previousSibling/nextSibling, childNodes, firstChild/lastChild, parentNode/ownerDocument, baseURI, localName, namespaceURI, prefix, textContent(返回節點及其后代的文本內容), text, xml.
方法：cloneNode(), insertBefore(), appendChild/removeChild/replaceChild, isEqualNode/isSameNode, normailze(合并相鄰的text節點并刪除空的text節點);

節點編號： 節點名稱：
1 Element?????????????? #important 等于1時表示是Element
2 Attribute
3 Text????????????????? #important
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instrucion
8 Comment
9 Document????????????? #important 等于9時表示是Document
10 Document Type
11 Document Fragment
12 Notation


(1)ownerDocument：返回節點的根元素（document對象）

(2)NodeList 對象代表一個有順序的節點列表。
我們可通過節點列表中的節點索引號來訪問列表中的節點（索引號由0開始）。
節點列表可保持其自身的更新。如果節點列表或 XML 文檔中的某個元素被刪除或添加，列表也會被自動更新。
屬性：length? 可返回節點列表中的節點數目。
方法：item() 可返回節點列表中處于指定的索引號的節點。



3，Element 對象
Element 對象
在 HTML DOM 中，Element 對象表示 HTML 元素。
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
NodeList 對象表示節點列表，比如 HTML 元素的子節點集合。
元素也可以擁有屬性。
屬性：attributes, baseURI, tagName, ownerDocument, nodeType, childNodes, firstChild, nextSibling
方法：appendChild()類，isEqualNode()類，getAttribute()類，getElementsByTagName()

與Node不同的是：node沒有屬性操作相關的方法。都是關于節點的，如appendChild()類，isEqualNode()類


(1) XMLElement 對象
Element 對象表示 XML 文檔中的元素。元素可包含屬性、其他元素或文本。如果元素含有文本，則在文本節點中表示該文本。
由于元素對象也是一種節點，因此它可繼承 Node 對象的屬性和方法。
重要事項：文本永遠存儲在文本節點中。在 DOM 處理過程中的一個常見的錯誤是，導航到元素節點，并認為此節點含有文本。不過，即使最簡單的元素節點之下也擁有文本節點。舉例，在 <year>2005</year> 中，有一個元素節點（year），同時此節點之下存在一個文本節點，其中含有文本（2005）。

(2) HTMLElement 對象
HTML DOM 節點，表示 HTML 中的一個元素。（nodeType是1）
在 HTML DOM （文檔對象模型）中，每個部分都是節點：
文檔本身是文檔節點
所有 HTML 元素是元素節點
所有 HTML 屬性是屬性節點
HTML 元素內的文本是文本節點
注釋是注釋節點

HTMLElement 對象繼承了 Node 和 Element 對象的標準方法。某些類型的元素實現了特定于標記的方法，W3School 在 HTML DOM 參考手冊的各標記參考頁中提供了這些方法的信息。




二、HTMLDocument ，HTMLCollection，HTMLElement，還有NodeList的關系

HTMLxxxxx在Document的基礎上進行HTML擴展，同理，還有XML實現。

HTMLDocument 接口提供了對 HTML 層級的訪問。
HTMLDocument 接口對 DOM Document 接口進行了擴展，定義 HTML 專用的屬性和方法。
很多屬性和方法都是 HTMLCollection 對象（實際上是可以用數組或名稱索引的只讀數組），其中保存了對錨、表單、鏈接以及其他可腳本元素的引用。
這些集合屬性都源自于 0 級 DOM。它們已經被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因為他們很方便。


HTMLCollection 是一個接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性。在 JavaScript 中，HTMLCollection 對象的行為和只讀數組一樣，可以使用 JavaScript 的方括號，通過編號或名稱索引一個 HTMLCollection 對象，而不必調用 item() 方法和 namedItem() 方法。
HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文檔改變時，那些改變通過所有 HTMLCollection 對象會立即顯示出來。
屬性：cssRules 只讀屬性，返回指示列表長度的整數（即集合中的元素數）。
方法：item(); 返回集合中指定位置的元素（節點）。
????? namedItem() 返回集合中 name 屬性或 id 屬性具有指定值的元素（節點）。



HTMLElement對象 表示 HTML 中的一個元素。（nodeType是1）
HTMLElement 對象繼承了 Node 和 Element 對象的標準方法。某些類型的元素實現了特定于標記的方法，W3School 在 HTML DOM 參考手冊的各標記參考頁中提供了這些方法的信息。



NodeList 對象代表一個有順序的節點列表。
我們可通過節點列表中的節點索引號來訪問列表中的節點（索引號由0開始）。
節點列表可保持其自身的更新。如果節點列表或 XML 文檔中的某個元素被刪除或添加，列表也會被自動更新。
屬性：length? 可返回節點列表中的節點數目。
方法：item() 可返回節點列表中處于指定的索引號的節點。

總結

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

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