classlist.toggle()是安全切换css类的最佳方式，自动去重、精准匹配、避免字符串拼接错误；支持布尔参数强制设状态，批量操作更高效，ie10+原生支持。
直接用 classList.toggle() 而不是手动拼字符串
很多人写 element.className += ' active' 或正则替换类名，看似能用，但极易出错：空格多一个、重复添加、大小写不一致、边界没处理好，都会导致样式失效或 class 堆积。而 classList.toggle() 是浏览器原生实现，自动去重、忽略顺序、精准匹配单词边界。
常见错误现象：element.className = element.className + ' active' 会不断追加，最终变成 "btn active active active"；正则替换漏掉开头或结尾的类，或误删带前缀的类（如把 highlighted 当成 light 删掉）。
-
classList.toggle('active')—— 最简切换，适合开关类 -
classList.toggle('active', condition)—— 指定布尔值强制开/关，适合条件驱动场景（比如根据 API 返回值决定是否高亮） - 不用管当前有没有这个类，也不用检查
contains()再手动add()/remove()，一步到位
classList 批量操作比单次调用更省开销
如果一次要改多个类，别连写三次 add()、remove()、toggle()。现代浏览器支持传多个参数，内部只触发一次 DOM 反射更新，避免重复 layout / style 计算。
性能影响明显：在表格行高亮、卡片状态切换等高频交互中，批量操作可减少约 30% 的样式重计算耗时（实测 Chromium 128+）。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ✅ 推荐：
element.classList.add('active', 'loaded', 'visible') - ✅ 推荐：
element.classList.remove('pending', 'error') - ❌ 避免：
element.classList.add('active'); element.classList.add('loaded'); element.classList.add('visible');
动态 class 切换必须配合事件委托，尤其对表格/列表
给每个 <tr> 或 <code><li> 单独绑 click 并调用 classList.toggle()，看似直白，实际埋雷：新插入的行没监听器、大量节点内存占用、删除后残留监听器。正确做法是监听父容器，再用 event.target.closest('tr') 定位目标行。
为什么 closest() 比反复 parentNode 更可靠？它自动跳过文本节点、注释节点，且能跨 shadow DOM 边界（如果用了 Web Components）。
- 绑定到
<table> 或 <code><ul></ul>上，而非每个子元素 - 在事件回调里用
const row = event.target.closest('tr')获取被点击的行，再操作row.classList.toggle('selected') - 记得加空值判断：
if (row) { ... }，防止点到表头、空单元格或非表格区域触发异常 - 用现成的轻量 shim，比如 classlist-polyfill（仅 1.2KB），它覆盖所有边缘 case，包括 SVG 元素
- 业务明确不支持 IE 的项目，直接不处理 —— 2026 年全球 IE 使用率已低于 0.03%，强行兼容反而拖慢现代浏览器执行
IE10 以下必须降级，但别自己写正则兼容层
classList 在 IE10+ 原生支持，IE9 及更早版本确实不支持。但自己手写正则替换类名（比如用 className.replace(/(^|\s)active(?!\S)/g, '')）容易出边界 bug，且维护成本高。
真正值得做的兼容方案只有两个：
最容易被忽略的一点：即使用了 polyfill，classList 的返回值仍是类数组对象，不能直接用 forEach，得转成数组再遍历 —— 这个细节在调试动态 class 同步逻辑时经常卡人半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
