查询选择器 - Javascript

简介

在Javascript中，查询选择器是用来选择DOM元素的一种强大的工具。它允许通过特定的选择器语法，从HTML文档中选择和操作元素。

选择器语法

查询选择器使用CSS选择器语法，通过选择元素的标签名、类名、ID等属性进行匹配。以下是一些常见的选择器示例：

• 元素选择器：通过元素的标签名来选择元素，例如 div 选择所有的 div 元素。
• 类选择器：通过元素的类名来选择元素，例如 .my-class 选择所有带有 my-class 类的元素。
• ID选择器：通过元素的唯一ID来选择元素，例如 #my-id 选择拥有 my-id ID的元素。
• 属性选择器：通过元素的属性来选择元素，例如 [name=value] 选择带有指定属性并且属性值为指定值的元素。

使用querySelector()

querySelector() 方法是Document对象提供的一个常用的查询选择器。它接受一个选择器作为参数，并返回第一个匹配到的元素。如果没有找到匹配的元素，则返回 null。

以下是 querySelector() 的使用示例：

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

使用querySelectorAll()

querySelectorAll() 方法与 querySelector() 类似，但是它返回所有匹配到的元素的集合。该方法返回的是一个类似数组的 NodeList 对象。

以下是 querySelectorAll() 的使用示例：

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

选择器的组合使用

可以使用组合选择器来选择具有特定关系的元素。例如，可以使用后代选择器、子元素选择器、相邻兄弟选择器等。

以下是一些组合选择器的示例：

• 后代选择器：parent div 选择所有父元素包含的 div 元素。
• 子元素选择器：parent > div 选择直接作为父元素的 div 元素。
• 相邻兄弟选择器：div + p 选择紧接在 div 元素后面的 p 元素。

动态查询和操作元素

查询选择器不仅可以获取匹配的元素，还可以使用它们进行动态的查询和操作。

例如，可以使用 element.classList 属性来操作元素的类：

const element = document.querySelector(".my-class");
element.classList.add("new-class");
element.classList.remove("old-class");

还可以使用 element.getAttribute() 和 element.setAttribute() 等方法来获取和设置元素的属性：

const element = document.querySelector("#my-id");
const value = element.getAttribute("data-value");
element.setAttribute("data-value", "new-value");

结论

查询选择器是Javascript中非常重要且强大的工具，可以帮助程序员选择和操作HTML文档中的元素。可以使用 querySelector() 和 querySelectorAll() 方法来选择元素，并使用其他DOM操作方法对它们进行进一步操作。