JavaScript 中如何检查给定元素是否有指定类

在 JavaScript 开发过程中，经常需要判断给定元素是否具有某个指定的类。这一操作在实现动态交互效果、样式切换以及元素状态管理等方面都有着广泛的应用。下面我们就来详细探讨几种常见的检查方法。

使用 classList 属性

在现代 JavaScript 中，classList 属性是检查元素类的首选方法。classList 是一个 DOMTokenList 对象，它提供了简单的方法来操作元素的类。要检查元素是否有指定类，可以使用 contains 方法。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="myDiv" class="active">这是一个测试 div</div>
    <script>
        const myDiv = document.getElementById('myDiv');
        const hasActiveClass = myDiv.classList.contains('active');
        if (hasActiveClass) {
            console.log('元素具有 active 类');
        } else {
            console.log('元素没有 active 类');
        }
    </script>
</body>
</html>

在上述代码中，首先获取了 id 为 myDiv 的元素，然后使用 classList.contains 方法检查该元素是否包含 active 类。这种方法简洁明了，并且浏览器兼容性较好。

使用 getAttribute 方法

另一种方法是使用 getAttribute 方法获取元素的 class 属性值，然后通过字符串操作来检查是否包含指定类。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="myDiv" class="active">这是一个测试 div</div>
    <script>
        const myDiv = document.getElementById('myDiv');
        const classNames = myDiv.getAttribute('class');
        const hasActiveClass = classNames && classNames.split(' ').includes('active');
        if (hasActiveClass) {
            console.log('元素具有 active 类');
        } else {
            console.log('元素没有 active 类');
        }
    </script>
</body>
</html>

在这段代码中，先获取元素的 class 属性值，然后将其按空格分割成数组，再使用 includes 方法检查数组中是否包含指定类。不过这种方法相对繁琐，并且在处理复杂的类名时可能会出现问题。

使用正则表达式

还可以使用正则表达式来检查元素的 class 属性值是否包含指定类。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="myDiv" class="active">这是一个测试 div</div>
    <script>
        const myDiv = document.getElementById('myDiv');
        const classNames = myDiv.getAttribute('class');
        const hasActiveClass = classNames && /\bactive\b/.test(classNames);
        if (hasActiveClass) {
            console.log('元素具有 active 类');
        } else {
            console.log('元素没有 active 类');
        }
    </script>
</body>
</html>

这里使用正则表达式 \bactive\b 来精确匹配 active 类，确保不会误匹配包含 active 的其他类名。

classList.contains 方法是检查给定元素是否有指定类的最便捷、高效的方式。但在某些特定场景或需要兼容旧版浏览器时，其他方法也能发挥作用。开发者可以根据实际需求选择合适的方法来实现功能。