JS class选择器|极客教程

JS class选择器

在使用JavaScript操作HTML元素时，经常需要通过类名来选择特定的元素。通过使用class选择器，我们可以找到DOM中具有特定类名的元素，并对它们进行操作。在本文中，我们将详细介绍如何使用JS class选择器来选择和操作HTML元素。

使用querySelectorAll方法选择类名

在JavaScript中，我们可以使用querySelectorAll方法来选择具有特定类名的元素。该方法返回一个NodeList对象，其中包含符合条件的所有元素。我们可以通过遍历NodeList对象来操作这些元素。

// 选择所有类名为example的元素
const elements = document.querySelectorAll('.example');

// 遍历NodeList对象
elements.forEach(element => {
  // 操作每个元素
  console.log(element.textContent);
});

在上面的示例中，我们选择了所有具有类名为example的元素，并通过遍历NodeList对象来输出每个元素的文本内容。

使用classList属性添加和移除类名

除了选择具有特定类名的元素外，我们还可以通过classList属性来操作元素的类名。classList属性提供了一组操作类名的方法，包括add、remove和toggle等。

// 选择一个具有类名为example的元素
const element = document.querySelector('.example');

// 添加一个新的类名
element.classList.add('new-class');

// 移除一个类名
element.classList.remove('example');

在上面的示例中，我们选择了一个具有类名example的元素，并通过classList属性的add方法添加了一个新的类名new-class，然后又通过remove方法将原先的类名example移除。

使用className属性设置类名

除了通过classList属性操作类名外，我们还可以直接使用className属性来设置一个元素的类名。className属性的值是一个字符串，可以包含一个或多个类名，类名之间用空格分隔。

// 选择一个具有类名为example的元素
const element = document.querySelector('.example');

// 设置新的类名
element.className = 'new-class';

在上面的示例中，我们选择了一个具有类名example的元素，并通过className属性直接设置了一个新的类名new-class。

示例代码

下面是一个使用JS class选择器的完整示例代码，包括选择元素、添加类名和移除类名等操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Class Selector Example</title>
  <style>
    .example {
      color: blue;
    }
    .new-class {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="example">Element 1</div>
  <div class="example">Element 2</div>
  <div class="example">Element 3</div>

  <script>
    // 选择所有类名为example的元素
    const elements = document.querySelectorAll('.example');

    // 遍历NodeList对象
    elements.forEach(element => {
      // 添加一个新的类名
      element.classList.add('new-class');
    });
  </script>
</body>
</html>

在上面的示例中，我们选择了所有具有类名example的元素，并通过classList的add方法给这些元素添加了新的类名new-class。运行以上代码后，具有类名example的元素将同时具有类名new-class，并且背景颜色会变成黄色。