NodeList和HTMLCollection

我就是我 2022-03-07 01:56 141阅读 0赞

以前从来没怎么注意`NodeList`和`HTMLCollection`之间的区别。直到我今天重新看了《JavaScript高级程序设计》才注意到它们之间是有着微妙的区别的。

先来看下面的代码

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div class="test">
        <p class="p1">Hello</p>
        <p class="p2">World</p>
        <script>
          let test = document.getElementsByClassName('test')[0];
    
          console.log(test.childNodes);
          console.log(test.children);
        </script>
      </div>
    </body>
    </html>

**控制台输出如下：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

首先**第一个**注意到的肯定是`test.childNodes`是`NodeList`类型的，而`test.children`则是`HTMLCollection`类型的。

**第二个**注意到的则是两者内包含的节点个数不同。`test.childNodes`内包含了7个节点，而`test.children`则只包含了3个元素。

下图说明了`test.childNodes`和`test.children`中所包含的节点在代码中分别代表着哪个部分。**红色框代表`test.childNodes`所包含的部分，蓝色框表示两者共同包含的部分。**

![在这里插入图片描述][20190315232520649.png]

两者所包含的节点数的不同便可以引出`NodeList`和`HTMLCollection`最大的一个不同：

**`NodeList`中可以包含所有的节点类型，而`HTMLCollection`只能包含ElementNode类型的节点。**

还有有一个比较小的区别，就是`HTMLCollection`有一个`namedItem()`方法。具体使用如下：

那有什么相同的吗？答案是肯定的。

首先它们都是类数组元素，都可以通过中括号加索引值的形式取到值，都具有`length`属性。

还有一个很大的相同点就是，`NodeList`和`HTMLCollection`都是动态的而不只是某个时刻的一个快照而已。

例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div class="test">
        <p class="p1">Hello</p>
        <p class="p2">World</p>
        <script>
          let test = document.getElementsByClassName('test')[0];
    
          let childNodes = test.childNodes;
          let children = test.children;
    
          console.log(childNodes);
          console.log(children);
    
          let p = document.createElement('p');
          test.appendChild(p);
    
          console.log(childNodes);
          console.log(children);
        </script>
      </div>
    </body>
    </html>

输出结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

可以看到在使用`appendChild`方法把一个新创建的节点添加到类名为`test`的`div`下的时候，它的`childNodes`和`children`均产生了变化。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220307/03c998cb045f41269a69dd4334130965.png
[20190315232520649.png]: /images/20220307/472c6557de264d8b844ab3e0b4e64688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20220307/0ea9ade28ebe4f60a27d478d6617125b.png