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