应优先使用 classList 而非手动拼接 className，因其原子化操作安全可靠；支持 add、remove、toggle、contains、replace（需兼容处理）等方法；多参数和展开语法可批量操作；注意事件绑定时机与 CSS 过渡重排。
直接用 classList，别碰 className
手动拼接字符串改 className 容易覆盖、漏删、重复，classList 是浏览器原生提供的安全接口，所有现代浏览器（包括 IE10+）都支持。它把 class 当作集合操作，增删查切都原子化，不会误伤其他类名。
常见错误：用 element.className += ' active' —— 这会把整个 class 字符串当普通文本追加，可能产生 btn activeactive 或覆盖原有类。
-
classList.add('active')：只加，已存在不报错 -
classList.remove('disabled')：只删，不存在也不报错 -
classList.toggle('hidden')：有则删，无则加；支持第二个参数强制设为 true/false -
classList.contains('loading')：返回布尔值，判断是否存在 -
classList.replace('old', 'new')：IE 不支持，需降级处理（见下一条）
replace() 兼容性差？用 remove() + add() 保底
classList.replace('a', 'b') 在 Safari 12.1 之前、旧版 Edge 和部分安卓 WebView 中不可用，线上出问题很难排查。别赌兼容性，显式拆解更稳。
if (element.classList.contains('old')) {
element.classList.remove('old');
element.classList.add('new');
}
注意：不要写成 element.classList.remove('old').add('new') —— remove() 返回 undefined，链式调用会报错。
立即学习“Java免费学习笔记（深入）”；
如果要批量替换多个类，建议封装小函数，比如：
function replaceClass(el, oldClass, newClass) {
el.classList.remove(oldClass);
el.classList.add(newClass);
}
一次操作多个类名，用展开语法或数组传参
classList.add() 和 remove() 都支持多参数，不用循环：
el.classList.add('active', 'highlight', 'animated');
el.classList.remove('pending', 'disabled');
若类名存在变量或来自数组，用展开运算符：
const classes = ['error', 'shake', 'visible']; el.classList.add(...classes); // ✅ 正确 // el.classList.add(classes); ❌ 会变成一个叫 "error,shake,visible" 的类
注意：IE 不支持展开语法，如需兼容 IE，改用 forEach 或传统 for 循环。
动态切换状态类时，警惕事件监听器绑定时机
类名变了，不代表样式或行为自动更新——尤其是你用类来控制组件状态（比如 .is-open 控制下拉菜单），但点击事件监听器没重绑或逻辑没响应类变化，就会“看起来没反应”。
- 别在类变更后才去绑事件，应提前绑定，用
contains()判断当前状态 - 避免反复
removeEventListener+addEventListener，开销大且易漏 - 用事件委托更稳妥，比如监听父容器，再根据
event.target.classList.contains('btn')分发
最常被忽略的一点：CSS 过渡（transition）依赖类存在时间差，如果 add 和 remove 在同一帧执行（比如都在一个函数里连续调），浏览器可能跳过渲染中间态，导致动画失效。需要强制重排：
el.classList.remove('fade-out');
void el.offsetWidth; // 强制重排，确保上一帧结束
el.classList.add('fade-in'); 
