classlist.contains()是检查dom元素是否包含指定css类名的最直接方法，返回布尔值；要求类名完全匹配，不支持子串匹配；常与add、remove、toggle联用；使用前需确保元素存在且为htmlelement。

classList.contains() 是 JavaScript 中检查 DOM 元素是否拥有指定 CSS 类名的最直接、最推荐的方法。它返回一个布尔值：true 表示包含该类，false 表示不包含。

基本用法

调用方式很简单：先获取元素，再调用其 classList.contains("类名")：

例如：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const box = document.getElementById("myBox");
if (box.classList.contains("active")) {
  console.log("元素有 active 类");
} else {
  console.log("元素没有 active 类");
}

注意类名必须完全匹配

contains() 检查的是完整、独立的类名，不支持模糊匹配或子串匹配：

• <div class="btn btn-primary"> → <code>el.classList.contains("btn") 返回 true
• <div class="btn-primary"> → <code>el.classList.contains("btn") 返回 false（因为没有独立的 btn 类）
• 不能写成 contains("btn-") 或 contains("primary") —— 这些都会返回 false

常见配合操作

通常和 classList.add()、classList.remove()、classList.toggle() 联用，实现条件控制：

• 有则移除，无则添加（即切换）→ 直接用 toggle()，无需先 contains
• 仅在没有某类时才添加 → if (!el.classList.contains("disabled")) el.classList.add("disabled");
• 仅在有某类时才执行逻辑 → if (el.classList.contains("loaded")) fetchData();

兼容性与安全使用

classList 在现代浏览器中广泛支持（IE10+），但需确保元素存在且是 HTMLElement：

• 避免对 null 或 undefined 调用 —— 先判空：if (el && el.classList) { ... }
• 服务端渲染或动态插入前，元素可能尚未挂载，建议在 DOMContentLoaded 后操作，或使用事件委托