掌握classList API的核心在于精准安全操作class属性而非手动拼接字符串；add()只添加不重复类名，remove()只移除不存在也不报错，toggle()自动切换且支持布尔强制控制，配合dataset可实现数据驱动的响应式状态同步。
掌握 classlist api 的核心在于理解它如何精准、安全地操作元素的 class 属性，而不是手动拼接字符串。响应式状态切换的关键，是让类名增删与用户交互或数据变化严格同步，避免冗余、冲突或遗漏。
add()：只添加，不重复，适合启用状态
add() 会自动忽略已存在的类名，不会报错，也不影响其他类。适合在触发某种“开启”行为时使用，比如点击按钮显示菜单、悬停激活高亮、加载中添加 loading 状态。
- 可一次传入多个类名：
el.classList.add('active', 'visible', 'fade-in') - 传入变量时建议先校验是否为字符串，避免意外添加
"undefined"或"null" - 不支持传入空格分隔的字符串（如
'btn btn-primary'），必须拆成独立参数
remove()：只移除，不存在也不报错，适合关闭状态
remove() 同样安全：目标类名不存在时静默跳过，不影响其他类。适合收起面板、取消选中、退出编辑态等“关闭”场景。
- 同样支持多参数：
el.classList.remove('active', 'editing', 'error') - 若需批量清除一组动态生成的类（如带前缀的状态类），可配合
forEach或解构数组使用 - 注意不要误删基础样式类（如
'card'、'btn'），应只管理状态类（如'is-open'、'has-error'）
toggle()：自动切换，最常用，适合开关类状态
toggle() 是响应式开发中最实用的方法——它根据类是否已存在，自动选择 add 或 remove。非常适合处理“点击切换”、“暗黑模式开关”、“展开/折叠”等二元状态。
- 基础用法：
el.classList.toggle('active')—— 存在则删，不存在则加 - 支持第二个布尔参数强制行为：
el.classList.toggle('disabled', isSubmitting)，让逻辑更清晰 - 可一次 toggle 多个类，但所有类都按同一条件执行（全开或全关），慎用于混合状态
配合 dataset 或属性判断，实现条件化类控制
单纯靠用户点击还不够，真实项目中常需结合数据状态更新类名。推荐将状态存于 dataset 或自定义属性，再用 classList 同步视觉反馈。
- 例如：
button.dataset.active = 'true'→ 同步执行button.classList.add('active') - 监听
input或change事件后，根据值有效性调用toggle('invalid') - 在 Vue/React 等框架中，
classList更适合作为底层封装工具，而非直接替代响应式 class 绑定
不复杂但容易忽略：始终把状态类和基础类分开管理，用语义化命名（如 is-loading、has-success），再搭配 add/remove/toggle 精准驱动，就能写出清晰、可维护、无副作用的状态切换逻辑。
