classList 是操作 HTML 元素 class 属性最安全、最推荐的方式，它自动处理空格分隔、去重和拼接错误；add()/remove() 支持多参数且免疫重复，toggle() 行为取决于布尔参数，contains()/replace() 更安全可靠。
直接用 element.classList 就自动去重，不用手动处理。 浏览器原生 API 已经把这件事干得又快又稳——你传重复类名进去，它只留一个；你反复 add() 同一个类，它也只认一次。
为什么 class 属性里出现重复类名是错的，但浏览器不报错
HTML 允许写 class="btn btn btn"，但这是无效冗余。浏览器渲染时会按实际 token 解析（相当于 split(' ').filter(Boolean).filter((x, i, a) => a.indexOf(x) === i)），所以视觉上没问题，但 DOM 中 element.className 仍返回原始字符串，含多余空格和重复项。
常见诱因：
- JS 拼接
className时没校验，比如el.className += ' active'多次执行 - 服务端模板生成 HTML 时逻辑出错，重复注入相同类
- 第三方库或 CMS 输出未清洗的 class 字符串
classList.add() 和 remove() 为什么天然免疫重复
classList 是 DOMTokenList 实例，内部用 set-like 结构维护类名集合，所有操作都基于唯一性判断。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
el.classList.add('active', 'active')→ 实际只加一次 -
el.classList.remove('disabled', 'disabled')→ 安静执行，不报错也不翻车 -
el.classList.toggle('hidden', true)→ 强制设为存在，不管之前有没有 - 传入大小写不一致的类名（如
'Active'）会被视为不同类，不会去重 —— 这是故意设计，因为 CSS 类名本身区分大小写
需要手动去重的场景：className 字符串必须被清理
仅当你不得不读写 element.className 字符串时才需干预，比如：
- 向旧版 IE（IE9 及以下）兼容 fallback
- 用正则提取类名做语义分析（如识别 BEM 块/元素/修饰符）
- 序列化 DOM 到 JSON 或日志中，要确保 class 字符串干净
安全去重写法：
const cleanClass = el.className
.split(' ')
.filter(Boolean)
.filter((cls, i, arr) => arr.indexOf(cls) === i)
.join(' ');
⚠️ 注意：split(' ') 对连续空格或首尾空格敏感，filter(Boolean) 能过滤空字符串；但若类名含 Unicode 空格（如 ），需额外处理。
真正麻烦的不是重复类名本身，而是它暴露了 class 操作方式混乱——比如混用 className += 和 classList，或者在循环里反复拼字符串再塞回去。这种写法既难 debug，又容易在动态交互中积累冗余。
