为什么 document.querySelector 从未使用过

Question

我只是想知道为什么没有人使用

document.querySelector("#myDiv");

而不是

document.getElementById("myDiv");

？

是否存在浏览器兼容性问题，或者原因是什么？

谢谢

Answer 1

前提

为了验证你的前提，我检查了 StackOverflow 答案，自 1 月份以来得分为 4 或更高......你是对的。

• 42 个答案仅使用

  document.querySelector

• 167 个答案仅使用

  document.getElementById

您可以在 Stack Exchange Data Explorer 自行尝试查询。

查询选择器

select count(*)
from Posts
where Body like '%document.querySelector(%'
and Body not like '%document.getElementById(%'
and PostTypeId = 2 -- Answer
and Score > 4
and CreationDate > '2017-01-01'
and CreationDate < '2017-08-01'

通过Id获取元素

select count(*)
from Posts
where Body like '%document.getElementById(%'
and Body not like '%document.querySelector(%'
and PostTypeId = 2 -- Answer
and Score > 4
and CreationDate > '2017-01-01'
and CreationDate < '2017-08-01'

回答

现在回答你的问题，很难说为什么人们会喜欢某种语法。 性能可能是一个问题（正如2pha指出的），因为

querySelector()

必须解析字符串以确定哪个元素将匹配，其中

getElementById

不需要解析输入字符串并且可以立即查询DOM。

但是，多次查询 DOM 并不是一个好的做法，因此这通常会发生一次，并且您将保留对该 DOM 元素的引用。

可能归结为以下几点：

• w3schools 适合初学者，所以当你第一次学习 javascript 时无需引入 css 选择器
• stackoverflow 有人在

  querySelector

  存在之前使用过 javascript，唯一的选择是

  getElementById

  所以其中一些只是习惯

Answer 2

使用querySelector一般就可以了。但考虑以下事项很重要：如果有一天您决定重写您的类（这在布局重新设计期间很常见），则这些更改可能会破坏您的脚本。我最近遇到了这个问题。现在我了解了尽可能使用 getElementById 的优势。在 CSS 级别，使用类而不是 ID。