資訊專欄INFORMATION COLUMN
摘要：坑當(dāng)然，也有可能會遇到踩坑的現(xiàn)象。與的關(guān)系至于與的關(guān)系，從繼承方面講可能為清晰很多?？偨Y(jié)是節(jié)點，其中包含不同類型的節(jié)點，只是節(jié)點的一種。繼承與，可以調(diào)用的方法。
起因
起因有二：
在看winter老師的分享：《一個前端的自我修養(yǎng)》時，有注意到這么一幅圖，里面有寫childNode和children屬性。
昨天有學(xué)弟問起我，能否自己定義一個所有元素節(jié)點通用的方法，就像數(shù)組可以用 Array.prototype.xxx 來添加一個所有數(shù)組的方法。
于是發(fā)現(xiàn)自己對于Node和Element的概念其實還不太清晰，所以上MDN看了看，寫篇博客沉淀一下。
Node類繼承于EventTarget，下面是MDN給的解釋。
Node在這兒指DOM節(jié)點，其中包括了我們最常見的元素節(jié)點，比如 div/p/span 之類的。除此之外還包括了 Document/Comment 之類的節(jié)點。
一個節(jié)點的類型，可以通過其nodeType類型查看到，具體的類型則可以看下圖：
Node定義了一些經(jīng)典的節(jié)點操作方法，我這兒畫了個簡單的圖，并沒有列出全部屬性。
寫前端的同學(xué)，日常應(yīng)該都會頻繁的用到這些方法。
當(dāng)然，也有可能會遇到踩坑的現(xiàn)象。比如說在使用nextSibling完成遍歷操作的時候，nextSibling有可能會返回的是文本節(jié)點而非元素節(jié)點，那么在調(diào)用一些元素節(jié)點的屬性或方法時（如 innerHTML），就會出錯。這也是為什么一定要區(qū)分清楚兩種節(jié)點的原因。
Element至于說Element, 大家肯定就熟悉多了。學(xué)前端入門的時候，就用過的 document.getElementBy* 的 Api，取出來的就是Element。
Element在MDN的解釋如下：
這個其實大家日常的使用也非常多，就不多做解釋了。
Node與Element的關(guān)系至于Node與Element的關(guān)系，從繼承方面講可能為清晰很多。
Element 繼承于 Node，具有Node的方法，同時又拓展了很多自己的特有方法。
所以在Element的一些方法里，是明確區(qū)分了Node和Element的，比如說：childNodes, children, parentNode, parentElement等方法。
而Node的一些方法，返回值為Node，比如說文本節(jié)點，注釋節(jié)點之類的，而Element的一些方法，返回值則一定是Element。
區(qū)分清楚這點了，也能避免很多低級問題。
由于JavaScript原型的特點，我們只要給原型添加方法，就可以在所有繼承的子元素中調(diào)用此方法。
當(dāng)然，在這兒你選擇污染Element的原型也好，Node的原型也罷，都是可行的。
具體看你要調(diào)用這個方法的元素，是純元素節(jié)點還是會有別的一些節(jié)點。
按需取用就行。
DEMO:
HTMLElement.prototype.sayHi = () => alert("hi")
const p = document.querySelector("p")
p.sayHi()
總結(jié)：
Node是節(jié)點，其中包含不同類型的節(jié)點，Element只是Node節(jié)點的一種。
Element繼承與Node，可以調(diào)用Node的方法。
給所有DOM元素添加方法，只需要污染Node或者Element的原型鏈就行。
參考資料：
MDN-Node
MDN-Element
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50912.html
摘要：重要方法在鏈尾添加元素除了這個方法以外，還提供了等一些方法，都是為實現(xiàn)和方法服務(wù)的，因為雙向鏈表的原因，這些實現(xiàn)都很簡單。 類聲明 LinkedList類聲明如下： public class LinkedList extends AbstractSequentialList implements List, Deque, Cloneable, java.io.Seria...
摘要：通過解析器獲取文檔對象后，開發(fā)人員可以很方便的對其進(jìn)行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認(rèn)使用隨包一起發(fā)行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初發(fā)表于我的個人博客非典型性程序猿 眾所周知，SAX與DOM是JAVA中兩大核心X...
摘要：通過解析器獲取文檔對象后，開發(fā)人員可以很方便的對其進(jìn)行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認(rèn)使用隨包一起發(fā)行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初發(fā)表于我的個人博客非典型性程序猿...
摘要：原理的雙向數(shù)據(jù)綁定的原理相信大家都十分了解主要是通過的對象的屬性重寫的和函數(shù)來實現(xiàn)的所以接下來不使用進(jìn)行實際的代碼開發(fā)過程中如果函數(shù)使用父級的情況還是使用顯示緩存中間變量和閉包來處理原因是箭頭函數(shù)沒有獨立的執(zhí)行上下文所以箭頭函數(shù)內(nèi)部出現(xiàn)對象 1.原理 vue的雙向數(shù)據(jù)綁定的原理相信大家都十分了解；主要是通過ES5的Object對象的defineProperty屬性；重寫data的set...
閱讀 3515·2021-11-12 10:36
閱讀 2577·2021-11-02 14:43
閱讀 2230·2019-08-30 14:23
閱讀 3543·2019-08-30 13:08
閱讀 997·2019-08-28 18:09
閱讀 3239·2019-08-26 12:22
閱讀 3247·2019-08-23 18:24
閱讀 2089·2019-08-23 18:17
