HTML 集合与 NodeList
原创HTML 集合与 NodeList
原创
泽霖
发布于 2023-12-19 23:46:22
发布于 2023-12-19 23:46:22
代码可运行
运行总次数：0
代码可运行
两者都是类似数组的对象，但在某些方面有所不同。
HTML集合（HTML Collection）
- 是元素节点的集合
- 由 'getElementsByClassName' 和 'getElementsByTagName' 返回
- 包含所有类型的节点：元素节点、文本节点等
节点列表（NodeList）
- 包含所有类型的节点：元素节点、文本节点等
- 由 'querySelectorAll' 返回
通过 querySelectorAll 返回的节点列表是静态的。静态意味着如果添加、删除或修改与查询匹配的更多项目，它不会更新。但这并不意味着更新节点列表内项目的属性不会被反映出来。
<html>
<p class="luck">容易，伙计</p>
<p class="luck">容易的诱饵</p>
<p class="luck">容易迟到</p>
</html>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腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
