querySelector 与 getElementById [关闭]

Posted

技术标签:

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

我听说querySelectorquerySelectorAll 是选择DOM 元素的新方法。在性能和浏览器支持方面,它们与旧方法 getElementByIdgetElementsByClassName 相比如何?

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

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

【问题讨论】:

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

“更好”是主观的。

querySelector 是较新的功能。

getElementByIdquerySelector 得到更好的支持。

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

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

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

(在上面,对于querySelector 阅读querySelector / querySelectorAll)。

【讨论】:

querySelector 支持:caniuse.com/#feat=queryselector 很好的答案,这里有一些benchmark tests【参考方案2】:

getElementByIdgetElementsByClassName 函数非常具体,而 querySelectorquerySelectorAll 更精细。我的猜测是,它们的性能实际上会更差。

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

【讨论】:

@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,但在前一种情况下它是实时的,而在后一种情况下它是一个快照。

以上是关于querySelector 与 getElementById [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何将条件反应与 document.querySelector 关联?

JavaScript中 querySelector 与 getElementById 方法的区别

为啥 querySelector 不能与 v-for 一起使用?

querySelector与getElementBy的区别

getElement与querySelector的区别

(getElementBy**)与 querySelector(querySelectorAll) 的区别