在JavaScript / HTML中，判断指定的元素是否含有某个类

示例：在 JavaScript 中判断一个元素是否包含 active 类。主要有以下几种常用方法：

---

1. 使用 classList.contains() （推荐）

这是现代浏览器最简洁、最可靠的方法，返回布尔值。

const element = document.querySelector('.your-element');
if (element.classList.contains('active')) {
    console.log('元素包含 active 类');
} else {
    console.log('元素不包含 active 类');
}

---

2. 使用 className 属性 + 正则 / indexOf

如果需兼容非常古老的浏览器（如 IE8 及以下），可以通过检查 className 字符串实现。

方法 A：正则表达式（精确匹配，避免误判）

const element = document.querySelector('.your-element');
if (new RegExp('\\bactive\\b').test(element.className)) {
    console.log('包含 active 类');
}

方法 B：indexOf（简单但有缺陷，如 active 是其他类名的一部分时可能误判）

if (element.className.indexOf('active') !== -1) {
    // 会误判如 "inactive" 也包含 "active"
}

不推荐 直接用 indexOf，因为可能匹配到类似 inactive 这样的类名。

---

3. 使用 matches() 方法

利用 CSS 选择器判断元素是否匹配某个选择器。

if (element.matches('.active')) {
    console.log('包含 active 类');
}

matches 兼容性较好（IE9+ 需加前缀 msMatchesSelector），但主要是用于选择器匹配，也可以用来检查类名。

---

总结

• 现代项目 → 首选 element.classList.contains('active')。
• 需要兼容非常老的浏览器 → 使用正则表达式 /\bactive\b/.test(element.className)。
• 顺便一提 ：也可用 element.matches('.active')，同样简洁，但语义上不如 classList.contains 直接。