最可靠方式是用 document.queryselectorall 获取静态 nodelist 后 foreach 遍历操作 classlist；避免 getelementsbyclassname 的实时集合问题及 classname 字符串拼接错误。
用 document.querySelectorAll 选中多个元素再统一操作
直接遍历 DOM 节点是批量设置 className 或 classList 的最可靠方式。别用 getElementsByClassName，它返回的是实时集合（live collection），在循环中修改 class 可能导致漏掉或重复处理。
实操建议：
- 用
document.querySelectorAll('.item')获取静态 NodeList，再用forEach遍历 - 避免直接赋值
el.className = 'new-class'，这会清空原有类名；改用el.classList.add('new-class')或el.classList.replace('old', 'new') - 若需完全替换所有类，用
el.className = 'base active highlight'，但务必确认这是你想要的覆盖行为
classList 的 add/remove/toggle 才是安全批量操作的核心
原生 className 字符串拼接容易出错：空格遗漏、重复添加、误删已有类。而 classList 是浏览器原生 API，自动去重、忽略空字符串、支持多参数。
常见错误现象：
-
el.className += ' active'→ 多余空格导致"active"变成" active"，CSS 不生效 -
el.className = el.className + ' active'→ 若原值为空，结果是" active"，开头空格无效 - 多次执行
el.classList.add('active')不会重复添加，但el.className += ' active'会不断累加
正确写法示例：
document.querySelectorAll('button').forEach(btn => {
btn.classList.add('btn', 'btn-primary'); // 一次加多个
btn.classList.remove('disabled');
});
用 dataset 或自定义属性辅助条件化批量设置
当不同元素需要根据状态动态加不同类时，硬编码 if/else 易失控。用 data- 属性存规则更清晰。
使用场景：
- 表格行根据
data-status="error"自动加error-row类 - 卡片组件根据
data-theme="dark"批量切换主题类
实操建议：
- 用
el.dataset.status读取值，再映射到类名，比如{ error: 'has-error', success: 'has-success' } - 避免在循环里反复调用
getComputedStyle或查询 DOM，提前缓存映射表 - 注意
dataset值始终是字符串，data-count="0"不等于false，需显式判断
性能敏感场景下慎用 querySelectorAll + forEach
在上千个节点上频繁执行（如滚动中实时更新）可能卡顿。此时应考虑节流、虚拟列表，或把样式逻辑下沉到 CSS 变量 / 自定义属性驱动。
可优化点：
- 用
Element.matches('.target')替代全量查询，适合已知父容器且子元素类型混杂的情况 - 对静态结构，优先用 CSS 伪类（如
:nth-child）或属性选择器（如[data-active]）代替 JS 批量操作 - 若只是开/关某类，用父级 class 控制后代样式（如
.theme-dark .card），比逐个设classList更轻量
真正难的不是怎么写循环，而是判断“这批元素是否真的需要 JS 干预”——很多所谓批量样式需求，其实 CSS 就能解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
