JavaScript 中检查元素类名的指南：使用纯 JavaScript 方法

javascript

2024-03-25 13:15:42

## 如何检查 JavaScript 中元素的类名

身为一名资深的开发者，检查元素是否包含特定类名是一项我经常需要执行的任务。虽然有多种方法可以实现这一目的，但在本文中，我将重点介绍使用纯 JavaScript 的方法（不使用 jQuery）。

问题阐述

我们的目标是找到一种方法来验证元素是否包含特定类名，即使该元素具有多个类名。

解决方法

最直接的方法是利用 className 属性，它包含元素的所有类名，用空格分隔。我们可以使用 includes() 方法来检查 className 是否包含要查找的类名。

以下是一个代码示例：

const element = document.getElementById('myElement');
if (element.className.includes('my-class')) {
  // 元素包含类名 'my-class'
}

替代方法

另一种方法是使用 classList 属性，它返回一个包含元素所有类名的 DOMTokenList。我们可以使用 contains() 方法来检查 classList 是否包含要查找的类名。

以下是一个代码示例：

const element = document.getElementById('myElement');
if (element.classList.contains('my-class')) {
  // 元素包含类名 'my-class'
}

处理多个类名

当元素包含多个类名时，我们可以采用以下方法之一：

使用 includes() 方法： 检查 className 是否包含要查找的类名子字符串。
使用 classList.contains() 方法： 检查 classList 是否包含要查找的类名。
使用正则表达式： 使用正则表达式在 className 中查找包含要查找的类名的模式。

代码示例

以下是一个示例代码，其中元素具有多个类名，我们使用 includes() 方法来检查元素是否包含 my-class 类名：

const element = document.getElementById('myElement');
if (element.className.includes('my-class')) {
  // 元素包含类名 'my-class'
} else if (element.className.includes('my-other-class')) {
  // 元素包含类名 'my-other-class'
} else {
  // 元素不包含任何这些类名
}

总结

在 JavaScript 中检查元素类名最常用的方法是使用 className 属性或 classList 属性。我们可以使用 includes() 或 contains() 方法来验证元素是否包含要查找的类名。通过应用本文中的技术，我们可以轻松地检查元素的类名，即使元素具有多个类名。

常见问题解答

如何使用正则表达式检查类名？
使用正则表达式，我们可以这样检查：
```
if (element.className.match(/my-class/)) {
  // 元素包含类名 'my-class'
}
```
如果元素的类名是动态添加的，我该如何检查？
在元素的类名发生变化时，我们需要重新检查。我们可以使用 MutationObserver 来监听元素的类名变化：
```
const observer = new MutationObserver(mutations => {
  // 检查元素的类名
});
observer.observe(element, { attributes: true });
```

是否可以同时检查多个类名？
是的，我们可以使用 classList.containsAll() 方法同时检查多个类名：

if (element.classList.containsAll(['my-class', 'my-other-class'])) {
  // 元素包含类名 'my-class' 和 'my-other-class'
}

如何检查元素是否不包含特定类名？
我们可以使用 not() 方法检查元素是否不包含特定类名：
```
if (!element.classList.contains('my-class')) {
  // 元素不包含类名 'my-class'
}
```
这些方法是否适用于所有浏览器？
这些方法支持所有现代浏览器，包括 Chrome、Firefox、Edge 和 Safari。