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

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

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



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

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(返回節(jié)點(diǎn)及其后代的文本內(nèi)容), text, xml.
方法：cloneNode(), insertBefore(), appendChild/removeChild/replaceChild, isEqualNode/isSameNode, normailze(合并相鄰的text節(jié)點(diǎn)并刪除空的text節(jié)點(diǎn));

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


(1)ownerDocument：返回節(jié)點(diǎn)的根元素（document對象）

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



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

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


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

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

HTMLElement 對象繼承了 Node 和 Element 對象的標(biāo)準(zhǔn)方法。某些類型的元素實(shí)現(xiàn)了特定于標(biāo)記的方法，W3School 在 HTML DOM 參考手冊的各標(biāo)記參考頁中提供了這些方法的信息。




二、HTMLDocument ，HTMLCollection，HTMLElement，還有NodeList的關(guān)系

HTMLxxxxx在Document的基礎(chǔ)上進(jìn)行HTML擴(kuò)展，同理，還有XML實(shí)現(xiàn)。

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


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



HTMLElement對象 表示 HTML 中的一個(gè)元素。（nodeType是1）
HTMLElement 對象繼承了 Node 和 Element 對象的標(biāo)準(zhǔn)方法。某些類型的元素實(shí)現(xiàn)了特定于標(biāo)記的方法，W3School 在 HTML DOM 參考手冊的各標(biāo)記參考頁中提供了這些方法的信息。



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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。