classList 通过 DOMTokenList 高效管理样式状态，支持 add/remove/toggle 批量操作、contains/replace 精准判断与替换、for…of 遍历及数组转换，避免手动拼接与重复风险。
直接用 classList 就能高效管理复杂状态样式，它背后就是 DOMTokenList 接口在工作——不用手动拼字符串、自动去重、安全原子、支持批量操作。
用 add/remove/toggle 批量切换多状态类
一个按钮可能同时处于“禁用+加载中+高亮”三种状态，对应 disabled、loading、highlight 三个类。用 classList 可一次性处理：
-
element.classList.add("disabled", "loading")—— 同时启用多个状态，重复调用也不会产生重复类名 -
element.classList.remove("loading", "highlight")—— 清理部分状态，不存在的类会被静默忽略 -
element.classList.toggle("highlight", isFavorited)—— 强制设为指定状态（第二个参数为true/false），比单纯无参 toggle 更可控
用 contains 和 replace 精准响应状态变更
当需要根据当前类名做条件判断或替换逻辑时，这两个方法很关键：
-
if (el.classList.contains("error")) { ... }—— 快速检测某状态是否存在，比正则匹配className字符串更可靠 -
el.classList.replace("warning", "success")—— 原子化替换，避免先remove再add的两步风险（比如中间被其他代码打断） - 配合
toggle的 force 参数，可实现「强制启用 A 类，同时禁用 B 类」的组合逻辑
遍历与同步：利用 DOMTokenList 的原生迭代能力
classList 返回的是 DOMTokenList 对象，它原生支持现代遍历方式，适合动态生成 UI 或调试：
-
for (const cls of el.classList) { console.log(cls); }—— 直接 for…of 遍历所有当前类名 -
[...el.classList].filter(c => c.startsWith("state-"))—— 转成数组后过滤，适合提取状态前缀类（如state-pending、state-done） -
el.classList.value返回空格分隔的完整字符串，方便日志记录或透传给后端
注意边界：DOMTokenList 不是数组，但可安全读取索引
虽然 el.classList[0] 或 el.classList.item(0) 能取到第一个类名，el.classList.length 也能获取数量，但它不支持 push、map、join 等数组方法：
- 错误写法：
el.classList.push("newClass")→ 报错 - 正确替代：
el.classList.add("newClass")或展开语法el.classList.add(...["a","b"]) - 需数组能力时，显式转：
Array.from(el.classList)或[...el.classList]
