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

    参考资料:

  • 相关阅读:
    web api 特点
    码农
    到程序员短缺的地方生活,不要到过剩的地方凑热闹
    程序员也要寻找贸易的机会,要参加研讨会
    [Codeforces 863D]Yet Another Array Queries Problem
    [Codeforces 863C]1-2-3
    [Codeforces 864F]Cities Excursions
    [Codeforces 864E]Fire
    [Codeforces 864D]Make a Permutation!
    [Codeforces 864C]Bus
  • 原文地址:https://www.cnblogs.com/10manongit/p/12222824.html
Copyright © 2011-2022 走看看