js获取class名字的方法

在JavaScript编程中，经常会遇到需要获取HTML元素的class名字的情况。这在操作和修改页面元素的样式、行为等方面非常有用。下面将介绍几种常见的js获取class名字的方法。

方法一：通过元素的className属性

这是最直接的方法。当你已经获取到一个具体的元素节点时，可以直接访问它的className属性来获取该元素的class名字。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="my-class">这是一个div元素</div>
  <script>
    const divElement = document.querySelector('div');
    const classNames = divElement.className;
    console.log(classNames);
  </script>
</body>

</html>

在上述代码中，通过querySelector获取到div元素后，使用className属性就可以得到其class名字。

方法二：使用classList属性

classList属性返回一个元素的类名列表，它提供了一些方便的方法来操作类名。例如，获取所有类名可以这样做：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="class1 class2">这是一个div元素</div>
  <script>
    const divElement = document.querySelector('div');
    const classList = divElement.classList;
    for (let className of classList) {
      console.log(className);
    }
  </script>
</body>

</html>

在这个例子中，通过遍历classList可以逐个获取到元素的每个class名字。

方法三：结合选择器获取具有特定class的元素

如果你想获取具有特定class名字的所有元素，可以使用document.querySelectorAll方法。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="specific-class">元素1</div>
  <div class="specific-class">元素2</div>
  <script>
    const elements = document.querySelectorAll('.specific-class');
    elements.forEach(element => {
      console.log(element.className);
    });
  </script>
</body>

</html>

这些方法在不同的场景下都有各自的用途，开发者可以根据实际需求灵活选择。