使用 document.querySelector('#id') 和 document.getElementById('id') 的区别答案

【问题标题】：Difference between using document.querySelector('#id') and document.getElementById('id')使用 document.querySelector('#id') 和 document.getElementById('id') 的区别
【发布时间】：2021-04-25 04:02:43
【问题描述】：

我是 javascript 的初学者，我看到很多人使用 document.querySelector('#id') 和一些人使用 document.getElementById('id') 来获取带有 id 的 html 元素。请回答天气这些是相同的，否则我们必须以不同的方式使用它们。

【问题讨论】：

他们的结果是一样的；它们的速度取决于实现。相关：Javascript querySelector vs. getElementById.
在这种使用情况下，它们的作用相同。但是 querySelector 方法更有用，JS 进化了吗
使用querySelector你可以选择任何东西，比如按名字的元素，有类名的元素和有id的元素。上面getElementById 专门用于按ID 选择元素。 developer.mozilla.org/en-US/docs/Web/API/Document/querySelector developer.mozilla.org/en-US/docs/Web/API/Document/….
getelementbyid 只选择 id 但 queryselector 选择任何东西，就是这样 xD
我预计 getElementById 会快几个数量级，但仍会导致绝对数字在 99.9% 的情况下绝对没有实际差异。

标签： javascript html

【解决方案1】：

当您使用 getElementById 分配变量时，您不必声明您正在文档中查找 id，因为它已经在方法的名称和功能中。但是，当您使用 querySelector 执行相同的操作时，您使用的是 CSS 选择器，因此您需要添加 # 以表示您正在寻找一个 id，这就是关键的区别。

const container = document.getElementById("container")

对

const banner = document.querySelector("#banner")

最初两者都做同样的事情。

【讨论】：