classList.contains 是用于精确判断 DOM 元素是否拥有指定 CSS 类名的方法，返回布尔值；需传入不带点号的类名字符串，区分大小写且全匹配，要求元素存在并已挂载。
classList.contains 是 DOM 元素 classList 对象提供的一个方法，用于**精确判断该元素是否拥有指定的 CSS 类名**（字符串形式），返回布尔值 true 或 false。
基本用法：直接传入类名字符串
语法很简单：
element.classList.contains('your-class-name')
注意：不能带点号（.），只传类名本身。例如检测是否有 active 类，写 'active'，不是 '.active'。
常见使用场景和注意事项
-
必须确保元素存在且已挂载：如果
element是null或尚未插入 DOM，调用会报错Cannot read property 'contains' of undefined。建议先做存在性检查：
if (element && element.classList) {
const hasActive = element.classList.contains('active');
}
-
区分大小写且全匹配：
contains('Btn')不会匹配btn或button-active；它只认完全一致、大小写敏感的独立类名。 -
不支持通配符或正则：不能用
contains('col-*')这类写法。如需模糊匹配，得手动遍历classList数组或用className.match(/.../)。
对比其他判断方式
-
element.className.includes('active')：容易误判，比如'inactive'也会被当成包含'active'； -
element.getAttribute('class').includes(...)：同上，且未处理空格、重复类等边界情况； -
classList.contains是标准、安全、语义清晰的首选方式。
实际小例子
假设有一个按钮：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
<button id="myBtn" class="btn btn-primary active">提交</button>
JS 中检测：
const btn = document.getElementById('myBtn');
console.log(btn.classList.contains('active')); // true
console.log(btn.classList.contains('disabled')); // false
console.log(btn.classList.contains('btn')); // true
不复杂但容易忽略细节，用对了就能准确又可靠地判断样式类是否存在。
