两者都是类似数组的对象,但在某些方面有所不同。
HTML集合(HTML Collection)
- 是元素节点的集合
- 由 'getElementsByClassName' 和 'getElementsByTagName' 返回
- 包含所有类型的节点:元素节点、文本节点等
节点列表(NodeList)
- 包含所有类型的节点:元素节点、文本节点等
- 由 'querySelectorAll' 返回
通过 querySelectorAll 返回的节点列表是静态的。静态意味着如果添加、删除或修改与查询匹配的更多项目,它不会更新。但这并不意味着更新节点列表内项目的属性不会被反映出来。
代码语言:html复制<html>
<p class="luck">容易,伙计</p>
<p class="luck">容易的诱饵</p>
<p class="luck">容易迟到</p>
</html>
代码语言:javascript复制const pEls = document.querySelectorAll('p')
console.log(pEls) // {p, p , p}
document.querySelector('html').appendChild(document.createElement('p'))
console.log(pEls) // {p, p , p}
所以它没有被添加到节点列表中,但如果我们使用 getElementsByTagName 做同样的事情,它将被反映出来,我们将看到第四个 <p>
被添加到了 HTML 集合中。
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!