classList 是操作 class 最安全的方式，但需避免传数组、误用 toggle 布尔参数、用 className.includes 判断、忽略元素挂载状态等常见错误。
直接说结论：classList 是操作 class 最安全的方式，但写错参数、误判 toggle() 行为、或拿它当字符串用，三分钟就能翻车。
add() 和 remove() 支持多参数，但不能传数组
这两个方法最常被误用的地方是把类名数组直接塞进去：element.classList.add(['a', 'b']) —— 这不会加两个类，而是把整个数组转成字符串 "a,b"，结果加了一个叫 a,b 的类（根本不存在的 CSS 类）。
正确写法必须是展开的多个字符串参数：
element.classList.add('active', 'loading', 'pending')element.classList.remove('disabled', 'error', 'hidden')- 类名已存在时
add()安静跳过；不存在时remove()也安静忽略，都不报错 - 不支持正则、通配符或模糊匹配，只认精确字符串
toggle() 的第二个参数不是可选“糖”，是控制开关
toggle('loading') 看似简单，但它只是「有就删、没就加」；真正容易出问题的是带布尔参数的用法：toggle('loading', isLoading)。
立即学习“前端免费学习笔记（深入）”；
这个 isLoading 必须是严格布尔值。如果它是字符串 "false"、数字 0、空对象 {}，在 JS 中仍是真值，toggle() 就会强制添加——而你本意可能是“只在加载时加”。
-
element.classList.toggle('hidden')：切换状态（无副作用判断） -
element.classList.toggle('hidden', true)：等价于add('hidden') -
element.classList.toggle('hidden', false)：等价于remove('hidden') - 建议显式转换：
toggle('loading', Boolean(isLoading))或直接用add()/remove()
contains() 是条件分支的唯一可信依据
别用 className.includes('active') 做判断——空格、大小写、子串误匹配（比如 active-item 会被 includes('active') 错判为 true）都会导致逻辑错误。
contains() 是唯一语义准确、大小写敏感、且只匹配完整 token 的方式：
-
element.classList.contains('active')返回true/false，没有歧义 - 只能传单个字符串，
contains('a', 'b')会把'a', 'b'当作一个参数（即字符串"a,b"），永远返回false - 适合用在 if 分支、三元表达式、事件守卫中，比如：
if (btn.classList.contains('disabled')) return;
replace() 和 item() 很少用，但 replace() 能避免 add+remove 组合的竞态
想把 old 换成 new，有人习惯先 remove('old') 再 add('new')。这在单线程下没问题，但若中间有其他脚本修改了 class（比如动画库、框架响应式逻辑），可能漏掉或重复。
replace() 是原子操作：
-
element.classList.replace('old', 'new')：仅当old存在时才替换，不存在则不做任何事 - 不支持多对一替换，一次只能换一个类
-
item(0)可读取第一个类名，但顺序不保证稳定（不同浏览器解析空格方式略有差异），不建议依赖
最常被忽略的点：所有 classList 方法都要求元素已挂载到 DOM 且非 null；对未插入页面的元素或 querySelector 失败返回的 null 调用 add()，会直接抛 TypeError: Cannot read property 'add' of null —— 这个错误和 class 操作本身无关，但排查时容易绕远。
