JavaScript querySelector

querySelector 是一个 JavaScript 方法，在搜索元素方面起着至关重要的作用。

在本节中，我们将理解和讨论 querySelector() 方法，它的用法，并通过一个示例来实际理解 querySelector() 方法的概念。

介绍 JavaScript querySelector() 方法

一个 Element 接口方法，它允许我们搜索并返回文档中的第一个元素。它查找与任何指定的 CSS 选择器或选择器组匹配的元素。但是，如果没有找到匹配的元素，它将返回 null。querySelector() 方法仅是 Document 接口的方法。Document 接口是一个描述任何 html、XML 或任何其他类型文档的通用方法和属性的接口。

querySelector() 方法如何执行搜索

我们知道有不同类型的搜索可用于搜索元素。然而，querySelector() 方法使用文档节点的 **深度优先前序** 遍历。在此过程中，遍历从文档标记中的第一个元素开始，然后按子节点数量的顺序遍历连续的节点。

语法

querySelector() 方法是 document 接口的方法，因此它具有此语法。

它有一个参数 'selectors'，它是一个 DOM 字符串，包含一个或多个有效的 CSS 选择器。

返回值

如果没有找到匹配项，它可能会返回 'null'；如果第一个元素与指定的 CSS 选择器（如果有）匹配，它将返回该元素。

但是，如果不存在有效的 CSS 选择器，它将抛出 'SyntaxError' 异常。

现在，在看示例实现之前，我们应该了解各种 CSS 选择器的类型。如果您不了解，请访问 CSS 教程的 css-selector 部分。

因此，我们现在将实现一个示例，在该示例中我们将涵盖一个 CSS 选择器，并使用 querySelector() 方法获取其第一个元素的值。

实现 querySelector() 示例

下面的示例代码将使我们理解 querySelector() 方法的工作原理

上述代码的输出如下所示

代码解释

• 上面的代码是 html 和 JavaScript 的组合。
• 我们在代码中实现了不同的 CSS 选择器。
• 在 JavaScript 部分，我们使用了一个 querySelector() 并调用了 CSS 的元素选择器。
• 因此，querySelector() 方法现在将通过深度优先前序方法遍历代码，并在找到第一个元素选择器时返回它。

这样，querySelector() 方法就执行了，您也可以尝试使用 querySelector() 方法来处理其他 CSS 选择器。

我们还为其他 CSS 选择器使用相同的示例。只需将元素选择器代码替换为下面描述的选择器代码即可。

一些 CSS 选择器

类选择器

我们需要使用类名旁的 (.) 运算符来查找类别的第一个元素。在输出中，您会看到 querySelector() 从代码的开头开始搜索，并且搜索在 h1 类元素上完成，因此它返回了指定的值，如下所示。

ID 选择器

使用 (#) 来使用 CSS 的 ID 选择器。

输出将如下图所示

属性选择器

上述代码的输出将是 'null'，因为在我们的代码中，我们没有使用任何如图所示的属性。

因此，存在各种 CSS 选择器，只要对 CSS 选择器及其类型有完整了解，就可以使用它们。

JavaScript querySelectorAll() 方法

JavaScript 的 querySelector() 方法用于仅选择代码中的第一个元素。但是，如果我们想保留代码中一个以上的 CSS 选择器值，该怎么办？因此，在这种情况下，我们使用 Document 接口的另一个方法，称为 querySelectorAll() 方法。querySelectorAll() 方法用于返回指定 CSS 选择器或 CSS 选择器组的所有匹配值。

语法

在语法中，它包含 selectors 作为参数，该参数包含一个或多个我们可以匹配值的选择器。

返回

如果找到匹配的列表或选择器，它将返回这些指定的值。否则，如果找不到匹配项，它将返回一个**空 nodeList**。

另外，如果指定的 CSS 选择器包含 CSS 伪元素，它将返回一个空列表。

语法错误

如果存在语法错误，它将返回一个语法错误异常，即指定的选择器字符串无效。

示例

下面是我们用于解释 querySelector() 方法的相同示例，让我们看同一个示例来理解这两种方法之间的区别。

现在，您可以看到代码的区别：在第一个示例中，我们使用了 querySelector() 方法，它只输出了第一个匹配的选择器值。但是，当您观察第二个示例的输出时，您会看到它返回了指定选择器或选择器组的所有匹配值。上述代码的输出显示如下。

代码解释

• 上面的代码是 html 和 JavaScript 的组合。
• 我们在代码中实现了不同的 CSS 选择器。
• 在 JavaScript 部分，我们使用了一个 querySelectorAll() 方法并调用了 CSS 的元素选择器。
• 因此，querySelectorAll() 方法现在将通过深度优先前序方法遍历代码，并返回所有指定的与 querySelectorAll() 方法参数匹配的元素值。

因此，同样，我们可以对各种其他类型的 CSS 选择器使用 querySelectorAll() 方法，它将返回其参数中指定的选择器的所有匹配值。为了实现该方法，请将 querySelector() 方法替换为各种选择器的 querySelectorAll() 方法，该方法将找到匹配项，并返回指定元素的至少一个匹配值。