浅析Node与Element

U2FsdGVkX1x 发布于2019-08-01 17:03 / 2232人阅读

摘要：坑当然，也有可能会遇到踩坑的现象。与的关系至于与的关系，从继承方面讲可能为清晰很多。总结是节点，其中包含不同类型的节点，只是节点的一种。继承与，可以调用的方法。

起因

起因有二：

在看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的原型链就行。

参考资料：

MDN-Node

MDN-Element

服务器托管云服务器 Element 源码浅析 cdn浅析 element-ui

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50912.html

LinkedList源码浅析

摘要：重要方法在链尾添加元素除了这个方法以外，还提供了等一些方法，都是为实现和方法服务的，因为双向链表的原因，这些实现都很简单。类声明 LinkedList类声明如下： public class LinkedList extends AbstractSequentialList implements List, Deque, Cloneable, java.io.Seria...

DC_er 2019-08-14 12:25 评论0 收藏0
浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿众所周知，SAX与DOM是JAVA中两大核心X...

妤锋シ 2019-08-14 14:42 评论0 收藏0
浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿...

JasinYip 2019-08-27 10:52 评论0 收藏0
浅析vue的双向数据绑定

摘要：原理的双向数据绑定的原理相信大家都十分了解主要是通过的对象的属性重写的和函数来实现的所以接下来不使用进行实际的代码开发过程中如果函数使用父级的情况还是使用显示缓存中间变量和闭包来处理原因是箭头函数没有独立的执行上下文所以箭头函数内部出现对象 1.原理 vue的双向数据绑定的原理相信大家都十分了解；主要是通过ES5的Object对象的defineProperty属性；重写data的set...

sshe 2019-08-22 16:23 评论0 收藏0