的原因有两个：在看winter老师的分享：《一个前端的自我修养》时，我注意到了这样一张图，里面有childNode和children属性。昨天有个同学问我能不能给所有的元素节点定义一个通用的方法，就像数组可以用Array.prototype.xxx给所有的数组添加一个方法一样。于是发现自己对Node和Element的概念其实不是很清楚，于是去MDN看了看，写了一篇博客来摆平。NodeNode类继承自EventTarget，下面是MDN给出的解释。这里的节点指的是DOM节点，包括我们最常见的元素节点，比如div/p/span之类的。此外，还包括Document/Comment等节点。一个节点的类型可以通过它的nodeType类型来查看，具体类型见下图：高频属性和方法Node定义了一些经典的节点操作方法。我这里画了一个简单的图，所有属性都没有列出来。写前端的同学应该在日常生活中经常用到这些方法。坑当然，你也可能会遇到踩坑的现象。例如，在使用nextSibling完成遍历操作时，nextSibling可能返回的是文本节点，而不是元素节点，那么在调用某些元素节点属性或方法（如innerHTML）时，就会出现错误。这就是为什么有必要区分这两种类型的节点。元素对于元素，想必大家比较熟悉。刚开始学前端的时候用的是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')constp=document.querySelector('p')p.sayHi()总结：Node是一个节点，里面包含了不同类型的节点，Element是只是Node的一种节点。Element继承自Node，可以调用Node的方法。为所有DOM元素添加方法，只需要污染Node或Element的原型链即可。参考：MDN-NodeMDN-Element
