淺析Node與Element

Node類繼承於EventTarget，下面是MDN給的解釋。

Node在這兒指DOM節點，其中包括了我們最常見的元素節點，比如 div/p/span 之類的。除此之外還包括了 Document/Comment 之類的節點。

一個節點的類型，可以通過其 類型查看到，具體的類型則可以看下圖：

高頻的屬性與方法

Node定義了一些經典的節點操作方法，我這兒畫了個簡單的圖，並沒有列出全部屬性。

寫前端的同學，日常應該都會頻繁的用到這些方法。

坑

當然，也有可能會遇到踩坑的現象。比如說在使用 完成遍歷操作的時候， 有可能會返回的是文本節點而非元素節點，那麼在調用一些元素節點的屬性或方法時（如 ），就會出錯。這也是為什麼一定要區分清楚兩種節點的原因。

Element

至於說Element, 大家肯定就熟悉多了。學前端入門的時候，就用過的 的 Api，取出來的就是Element。

Element在MDN的解釋如下：

這個其實大家日常的使用也非常多，就不多做解釋了。

Node與Element的關係

至於Node與Element的關係，從繼承方面講可能為清晰很多。

Element 繼承於 Node，具有Node的方法，同時又拓展了很多自己的特有方法。

所以在Element的一些方法里，是明確區分了Node和Element的，比如說： , , , 等方法。

而Node的一些方法，返回值為Node，比如說文本節點，注釋節點之類的，而Element的一些方法，返回值則一定是Element。

區分清楚這點了，也能避免很多低級問題。

如何給所有DOM元素添加方法

由於JavaScript原型的特點，我們只要給原型添加方法，就可以在所有繼承的子元素中調用此方法。

當然，在這兒你選擇污染Element的原型也好，Node的原型也罷，都是可行的。

具體看你要調用這個方法的元素，是純元素節點還是會有別的一些節點。

按需取用就行。

DEMO:

總結：

Node是節點，其中包含不同類型的節點，Element只是Node節點的一種。

Element繼承與Node，可以調用Node的方法。

給所有DOM元素添加方法，只需要污染Node或者Element的原型鏈就行。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！