classlist.add()和remove()需先确保元素存在，如const el = document.queryselector('#nav'); if (el) { el.classlist.add('expanded'); }，支持多参数批量操作，传空字符串或undefined不报错但无效。
classList.add() 和 remove() 怎么用才不会报错
直接调用 classList.add() 或 classList.remove() 前，必须确保元素存在且是合法 DOM 节点。常见错误是选中失败后还强行操作：document.querySelector('.missing') 返回 null，再链式调用 .classList.add('active') 就会抛出 Cannot read property 'classList' of null。
实际写法建议加一层存在性判断：
const el = document.querySelector('#nav');
if (el) {
el.classList.add('expanded');
}
- 支持一次传多个类名：
el.classList.add('a', 'b', 'c') -
remove()同理，可批量删：el.classList.remove('old', 'deprecated') - 传入空字符串或
undefined不会报错，但也不会生效
toggle() 的布尔逻辑到底怎么算
classList.toggle() 默认行为是「有则删、无则加」，但它其实接受第二个参数——一个明确的布尔值，用来强制切换结果。这点容易被忽略，导致在条件控制时行为反直觉。
- 不传第二个参数：
el.classList.toggle('hidden')→ 切换状态 - 传
true：el.classList.toggle('hidden', isOpen)→ 强制添加（当isOpen为true） - 传
false：等价于remove() - 注意：第二个参数是
Boolean类型，0、''、null都会被转成false，别误以为能靠假值跳过操作
contains() 检查类名时要注意什么
classList.contains('active') 是最安全的类名存在性检查方式，比用 className.includes('active') 可靠得多——后者会把 'inactive' 也误判为真。
- 只匹配完整类名，区分大小写
- 返回布尔值，不抛异常，即使元素没
class属性也能用 - 不能传正则或通配符，比如
contains('btn-*')会直接返回false - 如果要模糊匹配多个类，得自己遍历：
[...el.classList].some(cls => cls.startsWith('btn-'))
replace() 和 forEach() 在哪些场景下更实用
replace() 适合做「旧类换新类」的原子操作，避免先 remove 再 add 可能引发的中间态问题（比如 CSS 过渡被打断）。forEach() 则方便批量处理所有当前类名。
-
el.classList.replace('old', 'new')：仅当'old'存在时才替换，不存在不报错也不添加'new' -
el.classList.forEach(cls => console.log(cls))：遍历的是类名字符串，不是 DOMTokenList 本身，不可在遍历中修改classList - IE 不支持
replace()和forEach()，如需兼容，得降级用remove()+add()组合
toggle() 当纯添加用。类名操作看着简单，但一旦混进异步渲染、动态挂载或服务端未同步 class 状态，就很容易出现「该加没加」或「该删没删」的情况。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
