classlist.add()和remove()需传入非空、无空格的合法类名字符串，避免传空值或含空格字符串；toggle()第二个布尔参数控制强制状态，replace()仅在旧类存在时替换且不报错。
classList.add() 和 remove() 怎么传参才安全
这两个方法支持一次传多个类名，比如 el.classList.add("active", "highlight", "loading")，内部自动去重，重复类名（如 "active" 已存在）不会报错也不会新增。
常见错误是传了空值：el.classList.add("") 或 el.classList.add(undefined) —— 不报错，但无效；更危险的是传带空格的字符串，比如 "btn primary"，会被当作一个类名处理，而不会拆成两个，最终静默失败。
- 必须确保
el是有效 DOM 元素，document.querySelector(".xxx")返回null时再链式调用会抛Cannot read property 'classList' of null - 类名里不能含空格、制表符、换行符或控制字符，否则整个操作静默跳过
- 大小写敏感：
el.classList.add("Active")和已有"active"并存是合法的，但 CSS 通常不区分，容易引发样式冲突
toggle() 的布尔参数到底有什么用
el.classList.toggle("hidden") 是最常用写法，行为是“有则删、无则加”，但真正灵活的地方在第二个参数：el.classList.toggle("hidden", isVisible) —— 它强制把结果设为 isVisible 的布尔值，等价于 isVisible ? el.classList.add("hidden") : el.classList.remove("hidden")，但更简洁、原子性强。
容易踩坑的是误把非布尔值当参数：传 0、""、null 都会被转成 false，导致本想添加却执行了删除。需要明确传 true 或 false。
- IE10+ 支持
toggle()，但 IE9 及更早版本完全不支持，需降级用contains()+add()/remove() - 传入非法类名（如
"my class"）不会报错，也不生效，调试时很难发现
contains() 检查类名为什么不能用 className.includes()
el.classList.contains("error") 是唯一可靠方式。用 el.className.includes("error") 会误判："warning-error" 或 "errors" 都会返回 true，因为它是字符串匹配，不是类名边界匹配。
contains() 严格按空格分隔后的完整 token 匹配，且对缺失 class 属性的元素也安全（返回 false），不抛异常。
- 不支持通配符或正则，
contains("btn-*")直接返回false - 若需前缀匹配，得手动遍历：
[...el.classList].some(cls => cls.startsWith("btn-")) - 大小写必须完全一致，
contains("Error") !== contains("error")
replace() 替换类名的静默契约
el.classList.replace("old", "new") 只在 "old" 存在时才替换，不存在就什么都不做——不添加 "new"，也不报错。这是设计行为，不是 bug。
它解决了先 remove() 再 add() 可能导致的中间态问题（比如 CSS 过渡被中断），适合状态原子切换，例如从 "loading" 切到 "success"。
- IE 不支持
replace()，需 fallback：if (el.classList.contains("old")) { el.classList.remove("old"); el.classList.add("new"); } - 传入的旧类名不存在时，新类名绝不会被添加，这点和
add()完全不同，容易被忽略 - 不能一次替换多个类，
replace("a", "b", "c", "d")会报错，只接受两个参数
toggle() 的布尔参数控制力，以及 replace() “旧类不存在就不动”的静默逻辑——它们不是缺陷，而是 API 的契约。不理解这点，写出的类名控制代码会在边界条件下意外失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
