Javascript querySelector vs. getElementById [关闭]

122

我听说querySelector＆querySelectorAll是选择DOM元素的新方法。他们如何比较的老方法，getElementById和getElementsByClassName在性能和浏览器支持方面？

与使用jQuery的查询选择器相比，性能如何？

是否有针对哪个本机集的最佳实践建议？

javascript jquery dom

— goTo十一
source

定义更好。它们几乎完全不同。

这就像在问“单把扳手比可调扳手好吗？” 答案是：他们是更强大，更灵活，等上级多次，但getElementById和getElementsByClassName仍然是理想的目的，他们的名字形容。

— lonesomeday

哦，并且qS/qSA可以在任何元素上下文中使用，但是gEBI只能在document上下文中使用。

getElementById匹配id属性以查找DOM节点，同时querySelector通过选择器进行搜索。因此，对于一个无效的选择例如<div id="1"></div>，getElementById('1')将工作而querySelector('#1')将失败，除非你告诉它相匹配的id属性（如querySelector('[id="1"]')。

— 塞缪尔ELH

只是一个供参考的人读这篇文章，但querySelector和querySelectorAll现在完全支持。caniuse.com/#feat=queryselector

— Telarian

Answers:

132

“更好”是主观的。

querySelector 是较新的功能。

getElementById比更好的支持querySelector。

querySelector比更好的支持getElementsByClassName。

querySelector可让您查找带有无法用getElementById和表示的规则的元素getElementsByClassName

您需要为任何给定任务选择合适的工具。

（在上面，用于querySelector阅读querySelector/ querySelectorAll）。

— 昆汀
source

querySelector支持：caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden —不太重要，可能因浏览器而异。

— Quentin

很好的答案，这是一些基准测试

— angel.bonev

为什么更好的支持顺序：getElementById> querySelector> getElementsByClassName，因为我认为getElementsByClassName应该有相同级别的支持作为getElementById？

— 雷阳

这个答案似乎并没有涉及方法之间的差异，特别是在性能方面。

— Dror Bar

功能getElementById和getElementsByClassName非常具体，而querySelector和querySelectorAll更详细。我的猜测是，它们的性能实际上会更差。

另外，您需要在目标浏览器中检查每个功能的支持。它越新，缺少支持或功能“笨拙”的可能性就越高。

— 蒂亚戈·内格里（Thiago Negri）
source

@thomas您的链接已关闭。哪里有可用的链接？

— user5508297

有多个存档版本：web.archive.org/web/20160108040024/http : //jsperf.com/…但是该测试实际上非常古老（2010），因此对于更现代的引擎，结果可能会大不相同。

— 托马斯，2016年

存档页面实际上是动态的，允许您在当前浏览器上重新运行测试。在我的浏览器上，querySelectorAll仍然慢了大约37％。（Chrome 71-vgy.me/TwGL3o.png）还值得注意的是，getElementById返回实时结果，这意味着如果您更改DOM，则更改将反映在getElementByID获得的结果中（如果在范围内），而节点列表querySelectorAll返回的是快照，例如，与进行调用时的情况一样，结果将不会反映对DOM的后续更改。

— W.Prins，

nodelist ... is not live您可以为此提供文件吗？@ W.Prins这两个方法都返回Element类型。

— 马克西米利安·伯兹利

啊，我看错了，请您道歉！我应该写“ getElementsByClassName”，在其中写“ getElementByID”，例如，它是getElementsByClassName（和类似的返回活动结果集）。的确，getElementsByClassName和querySelectorAll都返回一个NodeList，但在前一种情况下它是实时的，而在后一种情况下

— W.Prins