起因
起因有二：
在看winter老師的分享：《一個前端的自我修養》時，有注意到這么一幅圖，里面有寫
childNode和children屬性。
昨天有學弟問起我，能否自己定義一個所有元素節點通用的方法，就像數組可以用 Array.prototype.xxx 來添加一個所有數組的方法。
於是發現自己對於Node和Element的概念其實還不太清晰，所以上MDN看了看，寫篇博客沉淀一下。
Node
Node類繼承於EventTarget，下面是MDN給的解釋。
Node在這兒指DOM節點，其中包括了我們最常見的元素節點，比如 div/p/span 之類的。除此之外還包括了 Document/Comment 之類的節點。
一個節點的類型，可以通過其nodeType類型查看到，具體的類型則可以看下圖：
高頻的屬性與方法
Node定義了一些經典的節點操作方法，我這兒畫了個簡單的圖，並沒有列出全部屬性。
寫前端的同學，日常應該都會頻繁的用到這些方法。
坑
當然，也有可能會遇到踩坑的現象。比如說在使用nextSibling完成遍歷操作的時候，nextSibling有可能會返回的是文本節點而非元素節點，那么在調用一些元素節點的屬性或方法時（如 innerHTML），就會出錯。這也是為什么一定要區分清楚兩種節點的原因。
Element
至於說Element, 大家肯定就熟悉多了。學前端入門的時候，就用過的 document.getElementBy* 的 Api，取出來的就是Element。
Element在MDN的解釋如下：
這個其實大家日常的使用也非常多，就不多做解釋了。
Node與Element的關系
至於Node與Element的關系，從繼承方面講可能為清晰很多。
Element 繼承於 Node，具有Node的方法，同時又拓展了很多自己的特有方法。
所以在Element的一些方法里，是明確區分了Node和Element的，比如說：childNodes, children, parentNode, parentElement等方法。
而Node的一些方法，返回值為Node，比如說文本節點，注釋節點之類的，而Element的一些方法，返回值則一定是Element。
區分清楚這點了，也能避免很多低級問題。
如何給所有DOM元素添加方法
由於JavaScript原型的特點，我們只要給原型添加方法，就可以在所有繼承的子元素中調用此方法。
當然，在這兒你選擇污染Element的原型也好，Node的原型也罷，都是可行的。
具體看你要調用這個方法的元素，是純元素節點還是會有別的一些節點。
按需取用就行。
DEMO:
HTMLElement.prototype.sayHi = () => alert('hi')
const p = document.querySelector('p')
p.sayHi()總結：
Node是節點，其中包含不同類型的節點，Element只是Node節點的一種。
Element繼承與Node，可以調用Node的方法。
給所有DOM元素添加方法，只需要污染Node或者Element的原型鏈就行。
參考資料：