classlist.add()和remove()安全增删类而不覆盖原有类，支持多参数批量操作，自动忽略重复或不存在的类名，且大小写敏感。
classList.add() 和 remove() 怎么用才不覆盖已有类
直接操作 element.className 会清空所有现有类，再赋新值——这是最常踩的坑。而 classList 是专门为此设计的 API，它只增删指定类，不影响其他类名。
比如元素当前是 <div class="btn primary active"></div>，执行 el.classList.add("disabled") 后变成 class="btn primary active disabled"；执行 el.classList.remove("active") 后变成 class="btn primary disabled"。
-
add()支持多个参数：el.classList.add("a", "b", "c") -
remove()同样支持批量删除：el.classList.remove("a", "b") - 传入不存在的类名不会报错，也不会影响已有类
toggle() 在开关状态切换时要注意什么
classList.toggle() 默认行为是“有则删、无则加”，适合按钮激活/非激活、菜单展开/收起这类二元状态。但它有两个关键细节容易被忽略：
- 第二个参数是布尔值，可强制设定结果：
el.classList.toggle("hidden", isVisible)—— 这比写 if/else 更简洁安全 - 如果传入的类名含空格或非法字符（如
"my class"），会静默失败，不抛错也不生效 - IE10+ 支持，但 IE9 及更早版本完全不支持
toggle()，需降级用contains()+add()/remove()
replace() 和 contains() 解决哪些具体场景
replace() 用于原子性替换类名，比如把 "loading" 换成 "success"，避免中间状态残留旧类；contains() 则是判断逻辑的前提，比如只在有某个类时才执行后续操作。
-
replace("old", "new")：旧类不存在时，不添加新类，也不报错 -
contains("xxx")返回布尔值，常用于条件分支：if (el.classList.contains("error")) { ... } - 注意大小写敏感：
contains("Error")不等于contains("error") - 所有方法都对 DOM 实时生效，无需手动刷新或重绘
兼容性差的写法和现代替代建议
老项目里常见 className += " new-class" 或正则替换，这些方式极易出错：空格重复、误删部分类名、无法处理动态类名拼接等。
- 不要用
className.split(" ").includes("x")判断类存在——它无法处理前后空格、多个连续空格、开头结尾空格等情况 - 服务端渲染（SSR）或框架（如 Vue/React）中，直接操作
classList是安全的，但避免在组件卸载后仍调用（会报Cannot read property 'classList' of null） - 需要兼容 IE9 的项目，可用 polyfill（如 classList.js），但更推荐封装一个轻量工具函数统一处理
toggle() 的布尔参数控制能力，以及 replace() 的“旧类不存在就不加新类”这一静默逻辑——它们不是 bug，而是设计契约，理解这点才能写出稳定可靠的类名控制逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
