NodeList和HTMLCollection

最新推荐文章于 2024-05-21 09:52:08 发布

Meskjei

最新推荐文章于 2024-05-21 09:52:08 发布

阅读量1.6k

点赞数 3

分类专栏： JavaScript 文章标签： NodeList HTMLCollection HTML DOM JavaScript

本文链接：https://blog.csdn.net/hjc256/article/details/88586677

版权

JavaScript 专栏收录该内容

32 篇文章 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>

控制台输出如下：

在这里插入图片描述

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

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

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

在这里插入图片描述

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

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

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

<!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" name='foo'>World</p>
    <script>
      let p = document.getElementsByTagName('p');
      console.log(p.namedItem('foo'));
    </script>
  </div>
</body>
</html>

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

首先它们都是类数组元素，都可以通过中括号加索引值的形式取到值，都具有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>

输出结果如下：

在这里插入图片描述

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

Meskjei

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
NodeList和HTMLCollection

以前从来没怎么注意NodeList和HTMLCollection之间的区别。直到我今天重新看了《JavaScript高级程序设计》才注意到它们之间是有着微妙的区别的。先来看下面的代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&q
复制链接

扫一扫

专栏目录