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