比较querySelector 与 getElementById

querySelector 和 getElementById 方法都允许您从JavaScript 文档对象模型 (DOM)检索元素。但是，每种方法都有自己的用例。

在本指南中，我们分解了 querySelector 和 getElementById 的最常见用例。我们还比较了这两种方法，并通过一个基本示例引导您了解每种方法的工作原理。

什么是查询选择器？

在JavaScript的querySelector（）方法可以让你从DOM，或网页检索元素，使用CSS选择器。这个方法带有一个被调用的姊妹函数querySelectorAll()，它从 DOM 中选择与特定选择器匹配的所有元素。

这两种方法的用途非常广泛。这是因为CSS 选择器语法允许您从网页中选择任何元素。

使用 querySelector，您不必担心被限制为只能按类或 ID选择元素，就像使用 getElementById 或 getElementsByClassName 一样。

如果您选择的元素与您在 CSS 样式表中选择的元素相似，则这些方法特别有用。

我们来看看 querySelector 方法。我们将首先编写一个 HTML 元素，稍后我们可以在 JavaScript 中选择该元素：

<p class="accessibility">Skip to main content</p>

我们已经定义了一段带有类名“accessibility”的文本。接下来，让我们使用querySelector()方法选择这一段。

const accessibility_elements = document.querySelector(".accessibility");

这段代码让我们选择第一个类等于“可访问性”的元素。”.” 表示我们要选择一个类。如果我们有两个具有“可访问性”类的元素，我们可以使用该querySelectorAll()方法来检索它们。

什么是 getElementById？

所述的getElementById（）方法检索是根据它的ID属性，因此得名的元素。

此方法比 querySelector 更具限制性，因为您只能根据元素的特定 ID 检索元素。

如果您只想从网页中检索一个元素，则可以使用此方法。这是因为 HTML ID 对于特定元素必须是唯一的。您不能使用 ID 来引用网页上的两个元素。

让我们使用 getElementById 选择器检索一个元素。首先，让我们编写将要从中选择元素的 HTML 代码：

<section id="comments">
	<h2>Comments</h2>
</section>

接下来，让我们编写 JavaScript 代码来从 DOM 中选择一个元素：

const comments_section = document.getElementById("comments");

我们使用 JavaScript 语句来检索 ID 等于“评论”的元素。这是我们在网页上显示评论的 <section> 元素。

querySelector 与 getElementById

这两种方法之间明显的相似之处在于它们都从网页中选择元素。他们以不同的方式这样做。

使用 querySelector 语句，您可以根据 CSS 选择器选择元素。这意味着您可以通过 ID、类或任何其他类型的选择器来选择元素。使用 getElementById 方法，您只能通过其 ID 选择一个元素。

通常，您应该选择最能清楚完成工作的选择器。

如果您只需要按 ID 或类选择元素，则可以分别使用 getElementById 或 getElementsByClassName。如果您需要使用更详细的规则来选择元素，则 querySelector 方法是您的最佳选择。

querySelector 和 getElementById 已经成为 JavaScript 的一部分有一段时间了。因此，现代浏览器完全支持这些方法。

结论

querySelector 方法允许您使用 CSS 选择器查询检索元素。getElementById 方法通过元素的 DOM ID 检索元素。

这两种方法都有广泛的浏览器支持。如果您需要使用更复杂的规则来选择元素，这些规则很容易使用 CSS 选择器来表示，那么您应该选择使用 querySelector 方法。如果您想通过 ID 选择元素，使用 getElementById 是一个不错的选择。

现在您已经了解了何时像专业人士一样使用 querySelector 和 getElementById 方法！