DOM中的节点,NodeList集合和HTMLCollection集合的区别

THER1881

已于 2022-07-14 11:42:06 修改

阅读量432

点赞数

文章标签： javascript

于 2022-06-24 19:47:59 首次发布

本文链接：https://blog.youkuaiyun.com/thwr1881/article/details/125238767

版权

本文详细介绍了DOM中的NodeList和HTMLCollection集合，包括它们的性质和使用场景。NodeList是一个包含所有类型节点的集合，而HTMLCollection是元素集合。两者都有length属性，但HTMLCollection还提供了nameItem()方法。NodeList可通过索引访问，HTMLCollection则额外支持通过name或id访问。在实际操作中，node.childNodes返回NodeList，node.children返回HTMLCollection。

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

NodeList和HTMLCollection集合

HTMLCollection是Element的集合

Nodelist是Node的集合

NodeList

NodeList是一个节点的集合(既可以包含元素和其他节点)，在DOM中，节点的类型总共有12种，通过判断节点的nodeType来判断节点的类型。我们可以通过Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多，这里不一一列举，下同)来获取到一个NodeList对象。NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素。

<body>
<div id="d1">
    刘备
    <p>张三</p>
    <p>李四</p>
</div>
<script>
    let d1 = document.querySelector('#d1')
    console.log(d1.childNodes)// NodeList
</script>
</body>

在这里插入图片描述

HTMLCollection

HTMLCollection是元素集合，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。当时它还有一个nameItem()方法，可以返回集合中name属性和id属性值得元素。HTMLDocument 接口的许多属性都是 HTMLCollection 对象，它提供了访问诸如表单、图像和链接等文档元素的便捷方式，比如document.images和document.forms的属性都是HTMLCollection对象

<body>
<div id="d1">
    刘备
    <p>张三</p>
    <p>李四</p>
</div>
<script>
    let d1 = document.querySelector('#d1')
    d2=d1.childNodes
    console.log(d1.children) //HTMLCollection
    console.log(d2.length)//输出为5
</script>
</body>