原生JavaScript中NodeList和HTMLCollection的区别

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

fcc627

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

阅读量262

点赞数

分类专栏： JS web前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/fcc627/article/details/125143820

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

主要不同在于HTMLCollection是元素集合而NodeList是节点集合（即可以包含元素，也可以包含文本节点）。

NodeList的元素是Node,HTMLCollection的元素是Element，Element继承自Node，是Node的一种，在HTML中，它一般是HTML元素（比如p，a之类的标签创建出来的对象）。而Node作为父类，除了Element还有一些其他子类，比如HTML元素内的文本对应的Text，文档对应的Document，注释对应的Comment。

HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多种元素。按说如果获取元素返回的列表里只有Element，那这两种类没多大区别，但事实上很多时候浏览器会将解析HTML文本时得到的Text和Comment一并放进列表里放回。

所以 node.childNodes 返回NodeList，而 node.children 和node.getElementsByXXX 返回 HTMLCollection ，只有document.getElementsByName返回的还是NodeList对象，还有另一个比较特殊的是querySelectorAll 返回的虽然是 NodeList ，但是实际上是元素集合，并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）。

注意： querySelectorAll 返回的虽然是NodeList ，但是实际上是元素集合，集合长度可以看出来（不包含空格text节点，不包含注释节点），并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）是static的

<div class="a">
	<div class="cc"></div>
</div>


console.log(document.getElementsByClassName('a')[0].childNodes);//nodelist
console.log(document.getElementsByClassName('a')[0].children);//Htmlcollection