classList 是操作 HTML 元素 class 属性最安全、最推荐的方式，自动处理空格分隔、去重和拼接错误；不可直接赋值，add()/remove() 支持多参数且免疫重复，toggle() 行为取决于布尔参数，contains()/replace() 更安全可靠，value 和 length 实用性低。
直接说结论：classList 是操作 HTML 元素 class 属性最安全、最推荐的方式，它自动处理空格分隔、去重、避免字符串拼接错误；但别直接赋值 element.classList = 'a b'——这会报错。
classList.add() 和 remove() 怎么用才不翻车
这两个是最常用的操作，但容易忽略的是：它们接受多个参数，且对重复类名完全免疫。
-
element.classList.add('active', 'loading')一次加多个类，不用写两次add() -
element.classList.remove('disabled', 'error')同样支持多参数，不存在“删掉一个另一个就失效”的问题 - 如果类名不存在，
remove()安静失败，不报错；add()遇到已存在的类也自动跳过，不会重复 - 别写成
element.classList.add(['a', 'b'])——数组会被转成字符串"a,b"，结果是加了一个叫a,b的类（不是你想要的）
classList.toggle() 的布尔逻辑容易被误解
toggle() 不只是“有就删、没就加”，它真正行为取决于第二个参数（布尔值），这个参数常被忽略。
-
element.classList.toggle('hidden')：无参调用，切换状态（存在则删，不存在则加） -
element.classList.toggle('hidden', true)：等价于add('hidden')，强制添加 -
element.classList.toggle('hidden', false)：等价于remove('hidden')，强制删除 - 常见坑：
toggle('loading', isLoading)看似简洁，但如果isLoading是字符串"false"或0，它仍为真值，导致误加——务必确保是布尔类型
contains() 和 replace() 在条件控制和重构中很实用
判断类是否存在、替换旧类为新类，这两个方法在动态 UI 场景中比手动字符串操作可靠得多。
-
element.classList.contains('error')返回true/false，比className.includes('error')安全——后者可能匹配到enderror这种子串 -
element.classList.replace('old', 'new')：只在存在old时才替换，不存在则不做任何事，也不报错；注意两个参数都是字符串，不能传正则或数组 - 想批量替换多个类？
replace()不支持，得用remove()+add()组合；别试图用className = className.replace(...)，会破坏空格格式、引入多余空格或丢失类 - IE10+ 支持
replace()，IE9 及更早版本不支持——如果还要兼容，得自己封装 fallback
classList.value 和 length 的实际意义很小
classList.value 就是 element.className 的只读副本，classList.length 是当前类名数量。它们几乎用不到，反而容易误导。
-
classList.value不能赋值，写el.classList.value = 'x y'没效果；要改全部类名，请用el.className = 'x y'（但一般不推荐） -
classList.length值得注意的是：它统计的是「解析后」的类名个数，比如class=" a b "（含多余空格）也会返回2，这点比手动className.split(/\s+/).length可靠 - 想遍历所有类名？用
element.classList.forEach(cls => {...})或展开为数组[...element.classList]，别用for (let i = 0; i 手动索引——classList 不是真数组，但支持展开和 forEach
真正麻烦的点往往不在语法本身，而在于：事件触发时机（比如 class 刚加完就查 contains()，但样式还没生效）、CSS 优先级干扰、或者服务端渲染时 class 被提前写死导致 JS 操作看似无效——这些都得结合具体场景排查，不是 classList 方法的问题，但新手常归错因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
