<p>应使用 classList 而非 className 直接赋值，因后者会覆盖全部类名导致样式断裂、状态丢失；classList 提供 add/remove/toggle/contains 等安全方法，注意 IE10- 需 polyfill，动画场景需控制时机避免抖动，动态类名推荐通过 data 属性解耦管理。</p>
直接用 className 赋值会清空所有已有类名，绝大多数场景下应该用 classList 接口操作单个类——这是现代浏览器中安全、可维护的唯一推荐方式。
为什么不能直接改 className
它不是“追加”或“更新”，而是整条字符串覆盖。比如元素原本有 class="btn primary disabled"，执行 el.className = "active" 后，primary 和 disabled 全丢了。常见后果包括：样式断裂、组件状态丢失、第三方库（如 Bootstrap 的 JS 插件）失效。
- 仅适合初始化时一次性写入，且确认不需要保留任何原始类
- 无法判断某个类是否存在，也不能原子性地增/删/切换单个类
- 在 SSR 或服务端模板生成的页面里，容易和后端注入的 class 冲突
classList 的核心用法和边界情况
classList 提供了真正语义化的类操作能力，但要注意几个易错点：
-
add()和remove()可传多个参数：el.classList.add('a', 'b')，比循环调用更高效 -
toggle('x', boolean)的第二个参数是强制开关，不传才按“有则删、无则加”逻辑 -
contains('x')返回布尔值，别写成if (el.classList.toggle('x'))—— 那是错的 - IE10 及以下不支持，若需兼容，必须用 polyfill 或降级为
className字符串拼接
切换类名时如何避免 DOM 重排抖动
频繁添加/移除类本身不会触发重排，但如果这些类带影响布局的 CSS（如 display: none、height、transform），就得注意顺序和时机：
立即学习“前端免费学习笔记（深入）”；
- 不要在同一个事件循环里反复切换同一组类，比如
add('fade')→remove('fade')→add('show')，应合并为一次replace('fade', 'show') - 涉及动画时，先加入场类（如
fade-in），再用setTimeout(() => el.classList.add('active'), 16)延迟激活主体逻辑，确保浏览器已应用初始样式 - 批量操作多个元素时，用
document.createDocumentFragment()或el.hidden = true暂时隐藏容器，改完再恢复
配合 data 属性做条件化类控制
当类名要根据数据动态生成（比如主题前缀、状态码映射），硬编码 classList.add('theme-' + theme) 容易出 XSS 或拼写错误。更稳的做法是：
- 把规则收口到 HTML 的
data-属性上：<div data-theme="dark" data-status="error"> - JS 中统一读取：
const theme = el.dataset.theme，再查表映射：const clsMap = { dark: 'theme-dark', error: 'state-error' } - 用
Object.keys(clsMap).forEach(k => el.classList.toggle(clsMap[k], el.dataset[k]))批量同步
这种写法让类名逻辑和 DOM 结构解耦，也方便后续用 MutationObserver 监听 data- 变更自动更新类。
