javascript批量修改节点背景色应优先使用css类方式，通过queryselectorall选中元素后调用classlist.add等方法操作类名，比直接设置style.backgroundcolor更灵活易维护。
用 JavaScript 批量修改一组节点的背景颜色，核心是先选中多个元素，再统一设置 style.backgroundColor 或通过添加/切换 CSS 类来控制样式。推荐优先用 CSS 类方式，更灵活、易维护。
用 querySelectorAll 选中多个节点
这是最常用的方式，支持任意 CSS 选择器，返回一个 NodeList（类数组）：
-
例如选中所有 class 为
item的元素：const nodes = document.querySelectorAll(".item"); -
选中页面中全部
div：const divs = document.querySelectorAll("div"); -
选中带特定 data 属性的按钮：
const buttons = document.querySelectorAll("button[data-role='action']");
遍历并直接设置 backgroundColor
适用于简单、一次性修改，不依赖 CSS 类：
- 用
forEach遍历 NodeList（现代浏览器原生支持）：nodes.forEach(el => el.style.backgroundColor = "#ff6b6b"); - 兼容旧浏览器可用
for...of或传统for循环：for (let el of nodes) el.style.backgroundColor = "lightblue"; - 注意：颜色值要写合法格式，如
"#fff"、"rgb(255, 0, 0)"、"transparent"等。
推荐：通过添加/切换 CSS 类统一控制
把样式逻辑交给 CSS，JS 只负责开关类名，更解耦、可复用、支持过渡动画：
- 先在 CSS 中定义类：
.highlight { background-color: #4ecdc4 !important; } - JS 中批量添加：
nodes.forEach(el => el.classList.add("highlight")); - 或替换已有背景类：
nodes.forEach(el => el.className = "highlight");（慎用，会清空其他类） - 更安全地切换（移除旧类、添加新类）：
nodes.forEach(el => { el.classList.remove("old-bg"); el.classList.add("new-bg"); });
小技巧：结合事件或条件动态修改
比如点击按钮后高亮所有表格行中满足条件的单元格：
document.querySelectorAll("td").forEach(td => { if (td.textContent.trim() === "error") td.style.backgroundColor = "salmon"; });- 或统一加类：
Array.from(document.querySelectorAll("td")).filter(td => td.textContent.includes("warn")).forEach(td => td.classList.add("warn-bg"));
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
