查询选择器有类 - JavaScript

在 JavaScript 中，我们可以使用选择器来获取文档中的元素并对它们进行一些操作。其中一个选择器类型是类选择器，也称为 CSS 类选择器。

什么是类选择器？

类选择器是以 '.' 开头的选择器，用来选取具有特定类的元素。例如，如果想选取所有带有 'red' 类的元素，可以使用以下选择器：

const redElements = document.querySelectorAll('.red');

如何在 HTML 中使用类选择器？

在 HTML 中，可以在元素的 'class' 属性中指定一个或多个类名。例如：

<div class="red text-center">Hello World</div>

在这个例子中，'class' 属性中指定了两个类名：'red' 和 'text-center'。可以使用以下代码获取具有 'red' 类的元素：

const redElements = document.querySelectorAll('.red');

如何在 JavaScript 中操作类选择器？

可以使用以下方法来操作类选择器：

add()

添加一个或多个类名到匹配的元素中。例如：

const element = document.querySelector('#myElement');
element.classList.add('new-class');

remove()

从匹配的元素中删除一个或多个类名。例如：

const element = document.querySelector('#myElement');
element.classList.remove('old-class');

toggle()

如果匹配的元素中存在给定的类名，则删除它；否则添加它。例如：

const element = document.querySelector('#myElement');
element.classList.toggle('red');

contains()

检查匹配的元素中是否存在给定的类名。例如：

const element = document.querySelector('#myElement');
if (element.classList.contains('red')) {
  // do something
}

结论

类选择器是一种非常有用的选择器类型，可以用来选择一个或多个具有相同类名的元素，并在 JavaScript 中进行操作。以上是一些常用的方法，但还有更多可用的方法可以参考 MDN 文档。