querySelector 与 getElementById [关闭]答案

【问题标题】：querySelector vs. getElementById [closed]querySelector 与 getElementById [关闭]
【发布时间】：2015-01-07 00:31:22
【问题描述】：

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

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

对于使用哪种方法有最佳实践建议吗？

【问题讨论】：

更好地定义。它们几乎完全不同。
这就像在问“单尺寸扳手比活动扳手更好吗？”答案是：它们更强大、更灵活，因此在很多场合都更胜一筹，但 getElementById 和 getElementsByClassName 仍然是它们名称所描述用途的理想选择。
哦，qS/qSA 可以在任何元素上下文中使用，但 gEBI 只能在 document 上下文中使用。
getElementById 匹配 id 属性以查找 DOM 节点，而 querySelector 通过选择器搜索。因此，对于无效的选择器，例如 <div id="1"></div>，getElementById('1') 将起作用，而 querySelector('#1') 将失败，除非您告诉它匹配 id 属性（例如 querySelector('[id="1"]')。
仅供阅读本文的任何人参考，但现在完全支持querySelector 和querySelectorAll。 caniuse.com/#feat=queryselector

【解决方案1】：

“更好”是主观的。

querySelector 是较新的功能。

getElementById 比 querySelector 得到更好的支持。

querySelector 比getElementsByClassName 得到更好的支持，但querySelector 为您提供静态节点列表，而getElementsByClassName 为您提供实时节点列表。

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

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

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

【讨论】：

【解决方案2】：

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

此外，您需要检查目标浏览器中每个功能的支持情况。越新，缺少支持或功能“有问题”的可能性就越大。

【讨论】：

@thomas 您的链接已关闭。任何地方都有工作链接吗？
有几个存档版本：web.archive.org/web/20160108040024/http://jsperf.com/… 但测试实际上很旧（2010），所以使用更现代的引擎结果可能会有很大不同。
存档页面实际上是动态的，允许您在当前浏览器上重新运行测试。 querySelectorAll 在我的浏览器上仍然慢了大约 37%。 (Chrome 71 - vgy.me/TwGL3o.png) 还值得注意的是 getElementById 返回实时结果，这意味着如果您更改 DOM ，更改将反映在 getElementByID 获得的结果中（如果在范围内），而 querySelectorAll 返回的节点列表是快照，例如按照调用时的情况，结果不会反映 DOM 的后续更改。
nodelist ... is not live 你能提供相关文件吗？ @W.Prins 两种方法都返回 Element 类型。
啊，我知道我打错了，请接受我的道歉！我应该在写“getElementByID”的地方写“getElementsByClassName”，例如它是返回实时结果集的 getElementsByClassName（和类似名称）。确实，getElementsByClassName 和 querySelectorAll 都返回一个 NodeList，但在前一种情况下它是实时的，而在后一种情况下它是一个快照。