querySelectorAll与原生js getElementsByTagName的区别

最新推荐文章于 2022-11-04 16:23:24 发布

原创最新推荐文章于 2022-11-04 16:23:24 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了DOM元素查询方法，如querySelectorAll与getElementsByClassName的区别，以及它们与getElementsByTagName的对比。解析了静态与动态集合的概念，揭示了不同方法在性能上的差异。

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

我们都知道两种方法都是用来找查找元素的,但两者有着细微的差异：

   通过querySelectorAll得到的集合是静态的
   而是用getElementsByClassName得到的是动态的集合，也
   就是说每一次调用都会去对dom节点进行一次查询。

querySelectorAll()和getElementsByTagName()两个方法都是用来从DOM树中获取元素集合。如果简单的理解就是用来选择DOM元素。虽然表面上都是用来选择DOM元素，但事实并非如此，两者之间还有很大的区别：在这里插入图片描述

 动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；
 静态集合则不会受DOM树元素变化的影响。

NodeList对象是一个节点的集合，是由Node.childNodes和document.querySelectorAll()返回的。NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的元素集合；querySelectorAll() 返回的是一个静态集合。
HTMLCollection 返回一个时时包括所有给定标签名称的元素的HTML集合，也就是动态集合。
getElementsByTagName()在所有浏览器上都比querySelectorAll()要快好多倍

  原因是使用getElementsByTagName方法我们得到的结果就像是一个对象的索引，
  而通过querySelectorAll方法我们得到的是一个对象的克隆；
  所以当这个对象数据量非常大的时候，显然克隆这个对象所需要花费的时间是很长的。