【发布时间】：2017-10-21 21:40:28
【问题描述】：
我遇到了一些 JS 代码，使用以下代码选择多个节点中的第一个。
querySelectorAll()[0]
下面的不是在做同样的事情吗？
querySelector()
使用querySelectorAll()[0]有什么好处吗？
【问题讨论】：
【发布时间】：2017-10-21 21:40:28
【问题描述】：
两个表达式将返回完全相同的结果。
唯一的区别是querySelectorAll()[0]会首先找到所有匹配选择器的项目，然后索引第一个项目。而querySelector() 一旦找到第一个元素就会“短路”。
因此，理论上，querySelector() 的效率可能略高于querySelectorAll()[0]。但是，它们的行为是相同的。
【讨论】：
-
“他们做同样的事情。” 然后你继续描述他们如何做非常不同的事情。
-
@ScottMarcus 我是说这两种方法返回完全相同的值。我会在我的回答中澄清。
-
我知道这就是你的意思，但那不是你说的。 ;)
它们都产生相同的结果，但它们采用不同的路线（字面上和比喻上）到达那里。在您的示例中，.querySelector() 是正确的方法，因为 .querySelectorAll() 在只需要使用第一个匹配项时扫描调用该方法的整个元素会导致更多的性能损失。
.querySelectorAll() 的优点是您可以缓存对整个匹配元素集的引用，然后根据需要对它们进行索引或循环。因此，如果需要第一个匹配的元素，但在代码中的其他地方需要整个集合，那么.querySelectorAll(<<selector>>)[0] 将是有意义的。
【讨论】：