JavaScript中通过element.classList操作样式类名是最简洁安全的方式，核心方法包括add、remove、toggle、contains；toggle用于深浅色主题切换，支持批量操作与条件控制，IE10+完全兼容。
JavaScript 中通过 element.classList 操作元素的样式类名，是最简洁、安全且推荐的方式，尤其适合实现「切换」（toggle）、「添加/删除」等动态效果，避免手动拼接或覆盖 className 字符串带来的风险。
classList 的核心方法：add、remove、toggle、contains
classList 是一个只读的 DOMTokenList 对象，提供多个实用方法：
- add("class1", "class2")：添加一个或多个类名（已存在则忽略）
- remove("class1", "class2")：移除一个或多个类名（不存在则无影响）
- toggle("class")：有则删、无则加——这就是最常用的「切换」操作
- contains("class")：返回布尔值，判断是否含有指定类名（可用于条件逻辑）
实现按钮点击切换主题色（典型 toggle 场景）
比如页面有个按钮，点击后切换深色/浅色模式：
<button id="themeBtn">切换主题</button> <div id="app" class="light">内容区域</div>
JS 部分只需一行核心代码：
立即学习“Java免费学习笔记（深入）”；
document.getElementById("themeBtn").onclick = () => {
document.getElementById("app").classList.toggle("dark");
};
配合 CSS 即可生效：
.light { background: #fff; color: #333; }
.dark { background: #222; color: #eee; }
注意：toggle() 不会清除其他类名，只干预目标类，安全可靠。
批量操作与条件控制（如多状态切换）
当需要根据状态切换多个类，或做条件判断时，可组合使用：
- 一次性添加多个类：
el.classList.add("active", "highlighted", "loaded") - 先检查再操作：
if (!el.classList.contains("disabled")) el.classList.add("disabled"); - 替换类（模拟旧式 className 覆盖）：
el.classList.replace("old", "new")（现代浏览器支持） - 清空所有类：
el.classList.remove(...el.classList)或更稳妥地el.className = ""
兼容性与注意事项
classList 在 IE10+ 及所有现代浏览器中完全支持。若需兼容 IE9 及以下，应降级使用 className 字符串操作（不推荐，易出错）。另外注意：
- 类名是大小写敏感的，
"Btn"和"btn"视为不同类 - 类名中不能含空格、制表符等，否则会被自动忽略或截断
-
classList不是数组，但可用[...el.classList]展开为数组进行遍历
