【JS】HTMLCollection和NodeList的区别

最新推荐文章于 2024-11-22 11:37:47 发布

田本初

最新推荐文章于 2024-11-22 11:37:47 发布

阅读量543

点赞数 12

分类专栏： JavaScript 面试题文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/owo_ovo/article/details/142921540

版权

JavaScript 同时被 2 个专栏收录

142 篇文章 4 订阅

订阅专栏

面试题

104 篇文章 1 订阅

订阅专栏

前言

HTMLCollection 和 NodeList 分别对应通过 document.getElementsByClassName 和 document.querySelectorAll 获取到的元素伪数组集合。
什么是伪数组可以看本人另一篇文章：JavaScript中的常见伪数组以及如何将伪数组转成真数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
  <script>
    Array.from({ length: 5 }, (_, i) => i).map(item => {
      const div = document.createElement('div');
      div.className = 'item';
      div.textContent = `Item ${item + 1}`;
      container.appendChild(div);
    })

    const html_collection = document.getElementsByClassName('item')
    console.log(html_collection);
    const node_list = document.querySelectorAll('.item')
    console.log(node_list);
  </script>
</body>

</html>

在这里插入图片描述

HTMLCollection

一个仅包含元素节点的动态集合，会随着 DOM 的改变自动更新。常见于通过 document.getElementsByClassName 或 document.getElementsByTagName 获取的集合。

在这里插入图片描述

动态集合会带来一些问题，如插入元素导致死循环

btn.onclick = function () {
  for (let i = 0; i < html_collection.length; i++) {
    const clone = html_collection[i].cloneNode(true)
    container.appendChild(clone)
  }
}
setInterval(() => {
  console.log("111");
}, 200);

在这里插入图片描述

NodeList

不同于 HTMLCollection，使用 querySelectorAll 获取的 NodeList 是静态的，dom改变时，并不会影响 NodeList。

在这里插入图片描述

使用 childNodes 获取的 NodeList 是动态的，效果同 HTMLCollection。

在这里插入图片描述

总结

特性	HTMLCollection	NodeList
类型	仅包含元素节点	可以包含任何类型的节点
获取方式	`getElementsByClassName`, `getElementsByTagName`	`querySelectorAll`, `childNodes`
是否动态	动态	动态（如 `childNodes`）或静态（如 `querySelectorAll`）
是否支持 `forEach`	不支持	支持（现代浏览器中）
常用场景	获取元素集合	获取所有类型的节点集合