JavaScript选择器函数querySelector和querySelectorAll

JavaScript选择器函数querySelector和querySelectorAll

在JavaScript中，querySelector和querySelectorAll是两个非常有用的选择器函数，它们可以在DOM树中匹配元素并且返回一个元素或元素列表。

querySelector

querySelector接收一个CSS选择器，返回与该选择器匹配的第一个元素。示例代码如下：

const element = document.querySelector(".example-class");

这个例子使用了类选择器".example-class"，选择了第一个class名为"example-class"的元素并存储在变量element中。如果没有匹配的元素，element将是null或undefined。

querySelectorAll

querySelectorAll也接收一个CSS选择器，但是返回所有与该选择器匹配的元素的一个集合。示例代码如下：

const elements = document.querySelectorAll("p.example-class");

这个例子使用了标签选择器"p"和类选择器".example-class"，选择了所有class名为"example-class"的段落元素并存储在变量elements中。如果没有匹配的元素，elements将是一个空列表或类数组对象。

CSS选择器

在使用querySelector和querySelectorAll时，我们可以使用任何CSS选择器来选择元素。下面是一些CSS选择器的例子：

• 标签选择器：使用元素名称如p、div、span。
• 类选择器：使用类名称如.example、.big。
• ID选择器：使用ID名称如#myDiv。
• 属性选择器：选择具有特定属性的元素，例如[type=checkbox]。
• 后代选择器：选择指定元素的后代元素，例如ul li。
• 子元素选择器：选择指定元素的直接子元素，例如ul>li。
• 伪类选择器：选择特定状态的元素，例如:hover、:focus。

通过组合不同的选择器，我们可以选择任何我们想要的元素。

综上所述，querySelector和querySelectorAll是非常有用的JavaScript选择器函数。通过使用不同的CSS选择器，我们可以找到任何我们想要的元素，并进行必要的DOM操作。