classList.add()支持一次添加多个类名且自动去重；误传数组会报错；空格类名CSS无法匹配。toggle()可切换或强制增删类，replace()安全替换类，contains()配合remove()实现条件移除，均需注意兼容性和非法字符风险。
classList.add() 添加单个或多个类名
直接调用 add() 方法就能往元素上加类，支持一次传多个字符串参数，重复类名会被自动忽略，不会报错也不会重复添加。
常见错误是误传数组或对象——add() 不接受数组，写成 el.classList.add(['active', 'fade']) 会报 TypeError: Invalid value used as weak map key。
- ✅ 正确：
el.classList.add('active', 'fade') - ❌ 错误：
el.classList.add(['active', 'fade']) - ⚠️ 注意：如果类名含空格（如
'my class'），会被当成一个类处理，但 CSS 里无法匹配——空格在类名中非法，浏览器会静默截断或忽略
classList.toggle() 控制类名的开关状态
比手动判断再增删更安全，尤其适合按钮点击切换样式、展开收起等交互场景。它默认是“有则删、无则加”，也可以强制设为开或关。
第二个参数是布尔值，传 true 强制添加，false 强制移除。不传时才按默认逻辑切换。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础用法：
el.classList.toggle('hidden') - 强制显示：
el.classList.toggle('hidden', false) - 强制隐藏：
el.classList.toggle('hidden', true) - 容易踩坑：在事件监听里反复调用
toggle()却没考虑异步或节流，可能导致视觉状态和实际 class 不一致（比如动画未结束就再次触发）
classList.replace() 替换旧类为新类
想把一个类换成另一个，又不想先 remove() 再 add()，就用 replace()。它只在旧类存在时才替换，不存在则什么都不做，也不报错。
这个方法在主题切换、状态迁移（如 'loading' → 'success'）时很干净，避免中间出现“既没旧类也没新类”的空白状态。
- 语法：
el.classList.replace('old-class', 'new-class') - 不支持批量替换，一次只能换一对
- 兼容性注意：IE 完全不支持，Edge 17+ 才开始支持；如需兼容老版本，得回退到
remove()+add()
classList.contains() 和 remove() 配合做条件移除
不是所有场景都需要切换，有时只是“如果有某类，就把它干掉”。比如表单提交后清空错误态：if (input.classList.contains('error')) input.classList.remove('error')。
虽然 remove() 本身对不存在的类名也是静默失败（不报错），但显式加 contains() 判断能让你逻辑更可读，也方便后续扩展（比如加日志或埋点）。
-
contains()返回布尔值，只认完整类名，不支持正则或子串匹配 -
remove()同样支持多参数：el.classList.remove('a', 'b', 'c') - 别写
el.className = el.className.replace(...)——那样会破坏其他通过 JS 或框架动态添加的类，classList是唯一安全的操作入口
真正麻烦的不是怎么加类，而是类名来源不可控：用户输入、接口返回、URL 参数拼接……这些地方一旦混入非法字符（空格、制表符、尖括号），classList 虽然不会崩，但后续 CSS 选中就会失效，而且很难排查。
