最安全的操作是使用 classlist.add() 添加类名，避免直接赋值 classname 或 setattribute("class", ...)；classlist 自动处理空格、去重和静默失败，而 classname += " active" 易导致重复空格，setattribute 大小写错误会被忽略。
直接用 classList.add() 最安全
别碰 className 赋值或 setAttribute("class", ...)，除非你明确想覆盖所有已有类。浏览器原生的 classList 接口专为增删改查类名设计，自动处理空格、去重、不存在时静默失败等细节。
常见错误现象：用 element.className += " active" 导致重复空格、类名叠加失控；或用 setAttribute 写错大小写（比如传 "Class"）被忽略。
-
element.classList.add("active")—— 添加单个类，已存在也不报错 -
element.classList.add("a", "b", "c")—— 一次加多个，参数是字符串列表 - 不支持传入空格分隔的字符串，如
add("a b")会当成一个类名 - 在 Shadow DOM 或某些老版 IE（
classList.toggle() 适合开关类名
点击切换状态（比如菜单展开/收起、按钮激活/禁用）时，toggle() 比先 contains() 再 add()/remove() 更简洁，也避免竞态问题。
使用场景：主题切换按钮、折叠面板、表单项验证反馈图标。
-
element.classList.toggle("hidden")—— 存在就删，不存在就加 -
element.classList.toggle("active", condition)—— 第二个参数为布尔值，强制设为存在或不存在 - 注意：如果传入的类名含非法字符（如点号、括号），会被静默忽略，不抛错
批量操作多个元素时别用循环套 querySelectorAll + forEach
看似自然，但容易忽略 NodeList 是只读的“快照”，若操作中触发 DOM 变更（比如移除某元素），后续索引可能错位。更稳妥的方式是转成数组或用 for...of。
性能影响：现代浏览器对 classList 操作做了优化，但频繁调用（如每帧都 toggle）仍可能触发样式重计算，建议节流或合并操作。
- 推荐写法：
document.querySelectorAll(".item").forEach(el => el.classList.add("processed")) - 兼容旧环境可写：
Array.from(document.querySelectorAll(".item")).forEach(...) - 避免：
for (let i = 0; i —— 若 list 是动态集合（如 <code>getElementsByClassName返回值），长度可能变化
服务端渲染后 JS 补充 class 要防重复或冲突
PHP 或 SSR 框架（如 Next.js）生成的 HTML 已带 class，JS 运行时再加类，得考虑是否已有同名类、是否与其他 JS 模块逻辑打架（比如两个组件都试图控制同一个 "loading" 类）。
容易踩的坑：没检查当前状态就硬加，导致类名膨胀；或用 className = "a b" 覆盖掉服务端注入的关键类（如用于 SEO 的 "seo-important"）。
- 加之前先
contains()判断，尤其涉及业务状态类（如"paid"、"archived"） - 约定命名空间，比如统一前缀
"js-active"，和 CSS 类区分开 - 避免在
DOMContentLoaded前就操作 —— 元素可能还没解析完，querySelector返回 null
element.className 或开发者工具 Elements 面板里的实时 class 列表，比查文档还管用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
