JavaScript querySelector方法

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

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

介绍JavaScript querySelector()方法

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

querySelector()方法如何执行搜索

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

语法

element = document.querySelector(selectors);

querySelector()方法是文档接口的方法，因此具有以下语法。

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

返回类型

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

但是，如果没有任何有效的CSS选择器，则会抛出’SyntaxError’异常。

现在，在查看示例实现之前，我们应该了解各种类型的CSS选择器。

因此，现在我们将实施一个示例，在这个示例中，我们将使用querySelector()方法来覆盖CSS选择器并保留其第一个元素的值。

实施querySelector()示例

下面是一个示例代码，可以帮助我们了解querySelector()方法的工作原理：

<html>
<head>
<meta charset="UTF-8">
<title> class="colors">Colors</title>
</head>
<body>
<h1> JavaScript Query Selector</h1>
<h1 class="myClass">Class 1</h1>
<p class="myClass"> Myclass</p>
<div id="firstid">
<p> It is the div p paragraph</p>
<p class="pclass"> div p class</p>
</div>
<p id="myid"> It is p id</p>
<div id="divid"> It is div id</div>
<script> <script>
 //Element selector
 var e=document.querySelector("p");
 console.log(e); 
 </script>
</body>
</html>

上述代码的输出如下所示：

JavaScript querySelector方法

代码解析

上面的代码是HTML和JavaScript的组合。
我们在代码中实现了不同的CSS选择器。
在JavaScript部分，我们使用了querySelector()并调用了CSS的元素选择器。
所以，querySelector()方法现在按照深度优先先序遍历的方式移动到代码中，并返回找到的第一个元素选择器。

通过这种方式，querySelector()方法被执行，你也可以尝试使用querySelector()方法来选择其他的CSS选择器。

我们也可以看看并使用同样的示例来选择其他的CSS选择器。只需将元素选择器代码替换为下面描述的这些选择器代码：

一些CSS选择器

类选择器

//Class selector
var e=document.querySelector(".myClass");
console.log(e);

我们需要使用(.)运算符捕获类名来找到类的第一个元素。在输出中，你会看到querySelector()从代码的开头开始搜索，搜索完成后返回h1类元素，所以它的返回值是一个指定的值，如下所示：

JavaScript querySelector方法

ID选择器

//ID selector
var e=document.querySelector("#myid");
console.log(e);

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

输出如下所示：

JavaScript querySelector方法

属性选择器

//Attribute selector
var e=document.querySelector('[target]');
console.log (e);

以上代码的输出将为“null”，因为在我们的代码中，我们没有使用如下所示的任何属性：

JavaScript querySelector方法

所以，有各种各样的CSS选择器，如果一个人具备完全的知识和理解CSS选择器及其类型，就可以使用它们。

JavaScript querySelectorAll() 方法

JavaScript的querySelector()方法仅用于选择代码中的第一个元素。但是如果我们想要保留代码中多个CSS选择器的值，怎么办呢？对于这种情况，我们使用另一种文档接口的方法，即querySelectorAll()方法。querySelectorAll()方法用于返回指定的CSS选择器或一组CSS选择器的所有匹配值。

语法

elementList = parentNode . querySelectorAll (selectors);

在语法中，它包含选择器作为参数，其中包含一个或多个选择器，用于匹配值。

返回值

如果找到匹配的列表或选择器，则返回这些值。否则，如果没有找到匹配项，则返回一个 空的节点列表 。

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

语法错误

如果有语法错误，则返回一个语法错误异常，指定的选择器字符串无效。

示例

下面是我们用来解释querySelector()方法的相同示例，让我们看一下相同示例以了解两种方法之间的差异：

<html>
<head>
<meta charset="UTF-8">
<title> class="colors">Colors</title>
</head>
<body>
<h1> JavaScript Query Selector</h1>
<h1 class="myClass">Class 1</h1>
<p class="myClass"> Myclass</p>
<div id="firstid">
<p> It is the div p paragraph</p>
<p class="pclass"> div p class</p>
</div>
<p id="myid"> It is p id</p>
<div id="divid"> It is div id</div>
<script>
 //Element selector
 var e = document.querySelectorAll ("p");
 console.log(e); 
 </script>
</body>
</html>

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

JavaScript querySelector方法

代码说明

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

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