Javascript querySelector与getElementById

Question

我听说querySelector&querySelectorAll是新的方法来选择DOM要素.他们如何比较的老方法,getElementById和getElementsByClassName在性能和浏览器支持方面？

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

是否有针对哪个本机设置使用的最佳做法建议？

Answer 1

"更好"是主观的.

querySelector 是更新的功能.

getElementById得到的支持比querySelector.

querySelector得到的支持比getElementsByClassName.

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

您需要为任何给定任务选择适当的工具.

(在上面,用于querySelector读querySelector/ querySelectorAll).

Answer 2

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

此外,您需要检查所针对的浏览器中每个功能的支持.它越新,缺乏支持的可能性越大或"错误"的功能越高.

有几个存档版本:https://web.archive.org/web/20160108040024/http://jsperf.com/getelementbyid-vs-queryselector但测试实际上非常陈旧(2010),所以结果可能非常与更现代的引擎不同. (6认同)
存档页面实际上是动态的，允许您在当前浏览器上重新运行测试。在我的浏览器上，querySelectorAll的运行速度仍然据称降低了约37％。（Chrome 71-https://vgy.me/TwGL3o.png）另外值得注意的是，getElementById返回实时结果，这意味着，如果您更改DOM，则更改将反映在getElementByID获得的结果中（如果在范围内）），而querySelectorAll返回的节点列表是快照，例如，与进行调用时的情况一样，结果将不会反映对DOM的后续更改。 (3认同)