在 JavaScript 中，classList 是一个用于操作 HTML 元素类名的 DOM 属性，它提供了更简单的方法来添加、删除、切换或检查元素的类（相比传统的 className）。以下是 classList 的详细用法：
1. 基本语法
element.classList
classList 返回一个 DOMTokenList 集合，包含元素的所有类名。
2. 常用方法
（1）添加类：add()
element.classList.add('class1', 'class2', ...);
• 添加一个或多个类名到元素。
• 示例：
const div = document.querySelector('div');
div.classList.add('active', 'highlight');
（2）删除类：remove()
element.classList.remove('class1', 'class2', ...);
• 移除一个或多个类名。
• 示例：
div.classList.remove('inactive');
（3）切换类：toggle()
element.classList.toggle('class', [force]);
• 如果类存在则删除，不存在则添加。
• force（可选）：布尔值，true 强制添加，false强制删除。
• 示例：
// 点击按钮切换 'dark-mode' 类
button.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
（4）检查类是否存在：contains()
element.classList.contains('class');
• 返回布尔值，表示类是否存在。
• 示例：
if (div.classList.contains('active')) {
console.log('元素有 active 类');
}
（5）替换类：replace()
element.classList.replace('oldClass', 'newClass');
• 将旧类替换为新类。
• 示例：
div.classList.replace('old-theme', 'new-theme');
3. 遍历类名
classList 是可迭代对象，可以用 for...of 或索引访问：
// 遍历所有类名
for (const className of div.classList) {
console.log(className);
}
// 通过索引访问
console.log(div.classList[0]); // 第一个类名
4. 注意事项
• 兼容性：classList 在所有现代浏览器中支持，但不支持 IE9 及以下版本。如果需要兼容旧浏览器，可以用 className配合字符串操作。
• 只读性：classList 是只读属性，但可以通过它的方法修改类名。
5. 对比 className
传统 className 操作：
// 添加类
element.className += ' new-class'; // 注意空格问题
// 删除类（需要正则或字符串处理）
element.className = element.className.replace('old-class', '');
classList 更简洁且避免手动处理字符串。
完整示例
<button id="btn">切换主题</button>
<div id="content" class="text">Hello World</div>
<script>
const btn = document.getElementById('btn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {
// 切换 'dark-theme' 类
content.classList.toggle('dark-theme');
// 检查是否存在
if (content.classList.contains('dark-theme')) {
console.log('当前是暗黑模式');
}
});
</script>
通过 classList，你可以更高效地操作元素的类名，适合动态样式交互、动画触发等场景。
