JavaScript中如何操作元素样式_ClassList怎么使用_技术教程

classList 是 DOM 元素上只读的 DOMTokenList 对象，用于安全、原子地操作 class 属性；相比 className，它避免覆盖、自动去重、无需手动处理字符串，常用 add/remove/toggle/contains 等方法。

classList 是什么，为什么不用 className

classList 是 DOM 元素上一个只读的 DOMTokenList 对象，专门用来安全、原子地操作元素的 class 属性。它比直接读写 className 更可靠：不会意外覆盖其他类名，也不用自己拆解字符串、去重或处理空格。

比如你给 添加 disabled 类，用 className += " disabled" 会变成 "btn active disabled" —— 看似没问题，但若重复执行，就可能变成 "btn active disabled disabled"；而 classList.add("disabled") 会自动去重，多次调用也只保留一份。

`常用方法：add / remove / toggle / contains`


这四个方法覆盖绝大多数日常需求，全部接受一个或多个字符串参数（支持多参数，无需循环）：


element.classList.add("a", "b")：添加类，已存在则忽略

element.classList.remove("a", "b")：移除类，不存在也不报错

element.classList.toggle("active")：有则删，无则加

element.classList.toggle("hidden", condition)：第二个参数为布尔值，强制设为“有/无”

element.classList.contains("loading")：返回 true 或 false


注意：toggle 不传第二个参数时是切换行为；传了（如 false）就等价于 remove，true 则等价于 add。

replace 和 item 方法容易被忽略的细节
replace 在旧类存在时才替换，否则不生效；item 按索引取类名（从 0 开始），但不推荐用于遍历 —— 因为 classList 是动态集合，长度可能随时变。
element.classList.replace("old", "new"); // 仅当有 "old" 才替换成 "new"
console.log(element.classList.item(0)); // 返回第一个类名，如 "btn"
console.log(element.classList.length); // 当前类数量，可用来遍历（但一般没必要）
真正需要遍历时，更稳妥的是用扩展运算符转数组：
[...element.classList].forEach(cls => console.log(cls));
不要用 for (let i = 0; i  直接索引访问，因为某些操作（如 replace）可能改变内部顺序，且 IE 不支持 item 的负数索引。

兼容性与 SSR 场景下的注意事项
classList 在 IE10+ 支持完整 API，IE9 只有部分支持（无 replace、toggle 布尔重载等）；服务端渲染（如 Next.js、Nuxt）中，document 未定义，直接调用 classList 会报 Cannot read property 'classList' of null 或 undefined。
安全写法是先判空再操作：
if (element && element.classList) {
  element.classList.add("loaded");
}
在 React/Vue 等框架中，更推荐用响应式数据驱动 class（如 className={\`btn \${isLoading ? 'loading' : ''}\`}），而非手动操作 classList —— 后者容易和框架的 class 更新逻辑冲突，尤其在组件重渲染后，手改的 class 可能被覆盖。
真实项目里，classList 最适合用在事件响应、动画钩子、第三方库集成等「绕过框架控制流」的场景，而不是替代条件 class 绑定。