querySelector 与 getElementById

IT技术 javascript jquery dom
2021-01-27 14:31:27

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

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

是否有关于使用哪种方法的最佳实践建议？

2个回答

“更好”是主观的。

querySelector 是较新的功能。

getElementById比 更好地支持querySelector。

querySelector比 更好地支持getElementsByClassName。

querySelector可以让你找到规则无法用getElementById和表达的元素getElementsByClassName

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

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

querySelector 支持：caniuse.com/#feat=queryselector
2021-03-26 14:31:27
@JasonVanDerMeijden — 不太重要，可能因浏览器而异。
2021-03-29 14:31:27
@DrorBar — 引用：“不太可能很重要，可能因浏览器而异”还引用：“这里有一些基准测试”
2021-04-02 14:31:27
很好的答案，这里有一些基准测试
2021-04-03 14:31:27
@LeiYang — 没有。
2021-04-14 14:31:27

功能getElementById和getElementsByClassName非常具体，而querySelector和querySelectorAll更精细。我的猜测是他们实际上会有更糟糕的表现。

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

有几个存档版本：web.archive.org/web/20160108040024/http : //jsperf.com/...但是测试实际上很旧（2010），所以结果可能与更现代的引擎有很大不同。
2021-03-21 14:31:27
nodelist ... is not live你能提供文件吗？@W.Prins 两种方法都返回Element类型。
2021-03-21 14:31:27
@thomas 你的链接挂了。任何地方都有工作链接吗？
2021-04-03 14:31:27
啊，我看到我打错了，请接受我的歉意！我应该在我写的“getElementByID”的地方写“getElementsByClassName”，例如它是 getElementsByClassName（和类似的），它返回一个实时结果集“。确实 getElementsByClassName 和 querySelectorAll 都返回一个 NodeList，但在前一种情况下它是实时的，而在后者中这是一个快照。
2021-04-09 14:31:27
存档页面实际上是动态的，并允许您在当前浏览器上重新运行测试。据报道，在我的浏览器上 querySelectorAll 仍然慢了大约 37%。(Chrome 71 - vgy.me/TwGL3o.png ) 还值得注意的是 getElementById 返回一个实时结果，这意味着如果您更改 DOM ，则更改将反映在 getElementByID 获得的结果中（如果在范围内）而节点列表querySelectorAll 返回的是一个快照，例如，由于调用时的情况，结果不会反映对 DOM 的后续更改。
2021-04-10 14:31:27
其它你可能感兴趣的问题
上一篇JavaScript 错误（Uncaught SyntaxError: Unexpected end of input） 下一篇如何从 Blob 到 ArrayBuffer