zoukankan      html  css  js  c++  java
  • 浅析Node与Element

    起因

    起因有二:

    1. 在看winter老师的分享:《一个前端的自我修养》时,有注意到这么一幅图,里面有写childNodechildren属性。
      node和element

    2. 昨天有学弟问起我,能否自己定义一个所有元素节点通用的方法,就像数组可以用 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()

    总结:

    1. Node是节点,其中包含不同类型的节点,Element只是Node节点的一种。

    2. Element继承与Node,可以调用Node的方法。

    3. 给所有DOM元素添加方法,只需要污染Node或者Element的原型链就行。

    参考资料:

  • 相关阅读:
    bzoj2733 永无乡 平衡树按秩合并
    bzoj2752 高速公路 线段树
    bzoj1052 覆盖问题 二分答案 dfs
    bzoj1584 打扫卫生 dp
    bzoj1854 游戏 二分图
    bzoj3316 JC loves Mkk 二分答案 单调队列
    bzoj3643 Phi的反函数 数学 搜索
    有一种恐怖,叫大爆搜
    BZOJ3566 概率充电器 概率dp
    一些奇奇怪怪的过题思路
  • 原文地址:https://www.cnblogs.com/10manongit/p/12222824.html
Copyright © 2011-2022 走看看