HtmlCollection和Nodelist的区别

最新推荐文章于 2025-06-16 17:52:36 发布

原创最新推荐文章于 2025-06-16 17:52:36 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

笔记专栏收录该内容

61 篇文章

订阅专栏

本文探讨了在JavaScript中DOM操作时，Nodelist和HTMLCollection两种节点集合的区别。Nodelist返回的是节点的集合，包括元素节点、文本节点等，而HTMLCollection则特指HTML元素的集合。它们都是节点类型，但HTMLCollection更专注于元素节点，且它是一个 live collection，即当DOM变化时，集合会实时更新。举例来说，使用`document.getElementsByClassName('a')[0].childNodes`将返回一个Nodelist，而`document.getElementsByClassName('a')[0].children`返回的是HTMLCollection。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Nodelist是返回节点的集合，而nodelist里面也有数组，因此元素也是节点的一种，也就是元素节点

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


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