如何在 JavaScript 中获取元素的类名

在 JavaScript 中，要获取一个元素的类名，我们可以使用 className 属性。 className 属性返回一个字符串，其中包含元素的所有类名。

以下是获取元素类名的示例代码：

var element = document.getElementById("myElement");
var classNames = element.className;

console.log(classNames);

在上面的示例中，getElementById 方法用于获取具有特定 ID 的元素，然后使用 className 属性获取该元素的类名，并将其存储在 classNames 变量中。最后，我们通过 console.log() 方法将类名打印到控制台。

如果元素有多个类名，它们将以空格分隔的字符串的形式返回。

通过类名选择器获取元素

除了直接获取元素的类名之外，我们还可以使用类名选择器通过类名来获取元素。类名选择器使用 querySelectorAll 方法和 . (点) 符号前缀。

以下是通过类名选择器获取元素的示例代码：

var elements = document.querySelectorAll(".myClass");

for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].className);
}

在上面的示例中，querySelectorAll 方法接受一个类名选择器作为参数，并返回所有具有该类名的元素的 NodeList。然后，我们使用循环遍历 NodeList 并使用 className 属性获取每个元素的类名。

使用正则表达式匹配特定类名

如果我们只对具有特定类名的元素感兴趣，我们可以使用正则表达式来进行匹配。我们可以使用正则表达式的 test() 方法来检查类名是否与所需的模式匹配。

以下是使用正则表达式匹配特定类名的示例代码：

var elements = document.getElementsByTagName("div");

var pattern = /myClass/;
for (var i = 0; i < elements.length; i++) {
  if (pattern.test(elements[i].className)) {
    console.log(elements[i].className);
  }
}

在上面的示例中，getElementsByTagName 方法用于获取所有 div 元素，并将它们存储在 NodeList 中。然后，我们通过循环遍历 NodeList，并使用正则表达式的 test() 方法检查每个元素的类名是否与 /myClass/ 模式匹配。如果匹配成功，我们将该类名打印到控制台。

希望以上信息对你有所帮助！