querySelectorAll( )和getElementsByTagName( )的坑

最新推荐文章于 2025-03-06 21:56:32 发布

H-Aven

最新推荐文章于 2025-03-06 21:56:32 发布

阅读量384

点赞数 1

分类专栏：领域

本文链接：https://blog.youkuaiyun.com/weixin_43292375/article/details/87351010

版权

领域专栏收录该内容

4 篇文章

订阅专栏

本文详细对比了querySelectorAll和getElementsByTagName两个DOM操作方法。前者返回静态NodeList集合，适用于删除元素，但新增元素需重新渲染；后者返回动态HTMLCollection集合，适合实时更新场景。文章还探讨了两者的速度差异及适用场景。

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

一. 区别
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。
前者返回的是NodeList集合，是一个静态集合
后者返回的是HTMLCollection集合，是一个动态集合

二. NodeList集合 / HTMLCollection集合
（1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的元素集合；querySelectorAll() 返回的是一个静态集合，DOM树新增元素不会实时更新
（2）HTMLCollection 返回一个时时包括所有给定标签名称的元素的HTML集合，也就是动态集合，DOM树元素会实时更新
(3)总结：动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；静态集合则不会受DOM树元素变化的影响。

三、两者速度
（1）getElementsByTagName 比 querySelectorAll 方法快
（2）原因：使用getElementsByTagName方法我们得到的结果就像是一个对象的索引，而通过querySelectorAll方法我们得到的是一个对象的克隆；所以当这个对象数据量非常大的时候，显然克隆这个对象所需要花费的时间是很长的
（3）打印输出的模式：我们使用的console.time和console.timeEnd方法得出来的时间并不是特别准确的；更准确的做法是使用Performance这个对象提供的now方法来进行计时。

四.删除元素
（1） querySelectorAll() 静态计算删除是ok的，getElementsByTagName()是动态计算，每删除一个都要重新分配索引
（2）以后删除元素，用querySelectorAll()

五、创建元素
(1) querySelectorAll() 静态计算, 新增元素不能更新，必须再次渲染，
getElementsByTagName()是实时更新
(2) 以后创建元素，用 getElementsByTagName()