JS获取类名的多种方式

在前端开发过程中，经常需要操作DOM元素的类名。而JavaScript提供了多种方式来获取类名，便于我们在代码中进行相关操作。本文将介绍JS中获取类名的几种常用方式。

一、使用 `getElementById()` 方法获取类名

getElementById() 是JavaScript中用于获取指定id的DOM元素的方法。虽然它的名字中含有 “Id”，但实际上也可以用来获取类名。

示例代码：

<div id="myDiv" class="myClass">Hello World</div>

<script>
  var div = document.getElementById("myDiv");
  var className = div.className;
  console.log(className); // 输出 "myClass"
</script>

上述代码中，通过 getElementById() 方法获取到id为 “myDiv” 的元素，并通过其 className 属性获取到类名 “myClass”。

二、使用 `getElementsByClassName()` 方法获取类名

getElementsByClassName() 是JavaScript中用于获取指定类名的DOM元素的方法。该方法返回一个伪数组（类似数组），包含了所有具有指定类名的元素。

示例代码：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<script>
  var items = document.getElementsByClassName("item");
  console.log(items.length); // 输出 3
</script>

上述代码中，通过 getElementsByClassName() 方法获取到类名为 “item” 的所有元素，并将其赋值给变量 items。然后可以通过 items.length 获取到元素的个数。

三、使用 `querySelectorAll()` 方法获取类名

querySelectorAll() 是JavaScript中用于选择指定CSS选择器的DOM元素的方法。我们可以使用类名选择器来查询具有指定类名的元素。

示例代码：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

<script>
  var boxes = document.querySelectorAll(".box");
  console.log(boxes.length); // 输出 3
</script>

上述代码中，通过 querySelectorAll() 方法使用类名选择器 “.box” 查询具有类名 “box” 的所有元素，并将其赋值给变量 boxes。然后可以通过 boxes.length 获取到元素的个数。

四、使用 `classList` 属性获取类名

classList 是JavaScript中元素的属性，用于操作元素的类名。它提供了一系列方法来添加、删除、切换和检查类名。

示例代码：

<div id="myDiv" class="myClass">Hello World</div>

<script>
  var div = document.getElementById("myDiv");
  var classNames = div.classList;

  console.log(classNames); // 输出 ["myClass"]

  classNames.add("newClass");
  console.log(classNames); // 输出 ["myClass", "newClass"]

  classNames.remove("myClass");
  console.log(classNames); // 输出 ["newClass"]

  classNames.toggle("newClass");
  console.log(classNames); // 输出 []

  console.log(classNames.contains("newClass")); // 输出 false
</script>

上述代码中，通过 classList 属性获取到元素的类名列表，并赋值给变量 classNames。然后可以通过其提供的方法来添加、删除、切换和检查类名。

五、使用正则表达式获取类名

除了上述方法，我们还可以使用正则表达式来获取类名。

示例代码：

<div class="box first">Box 1</div>
<div class="box">Box 2</div>
<div class="box last">Box 3</div>

<script>
  var elements = document.getElementsByTagName("div");
  var classNames = [];

  for (var i = 0; i < elements.length; i++) {
    var classList = elements[i].className.split(" ");

    for (var j = 0; j < classList.length; j++) {
      if (/box/.test(classList[j])) {
        classNames.push(classList[j]);
      }
    }
  }

  console.log(classNames); // 输出 ["box", "box", "box"]
</script>

上述代码中，通过 getElementsByTagName() 方法获取到所有的 <div> 元素。然后遍历每个元素的类名列表，使用正则表达式 /box/ 进行匹配，并将匹配到的类名添加到 classNames 数组中。