本文介绍在 JavaScript 中高效批量操作多个具有不同 ID 的 DOM 元素样式的方法，重点讲解使用数组 + forEach 循环替代重复 getElementById 调用的实践方案，并提供可复用的封装建议与关键注意事项。
本文介绍在 javascript 中高效批量操作多个具有不同 id 的 dom 元素样式的方法，重点讲解使用数组 + `foreach` 循环替代重复 `getelementbyid` 调用的实践方案，并提供可复用的封装建议与关键注意事项。
在实际开发中，频繁为多个特定 ID 元素设置相同 CSS 样式（如 display: block）时，若沿用传统写法——逐个调用 document.getElementById()，不仅代码冗长、难以维护，还违背 DRY（Don’t Repeat Yourself）原则。例如：
document.getElementById("fill2a").style.display = "block";
document.getElementById("show2").style.display = "block";
document.getElementById("choice2").style.display = "block";✅ 更优解是：将目标 ID 统一存入数组，再通过迭代批量操作。推荐使用 forEach 配合箭头函数，语义清晰且兼容性良好（支持所有现代浏览器及 IE9+）：
const ids = ["fill2a", "show2", "choice2"];
ids.forEach(id => {
const el = document.getElementById(id);
if (el) el.style.display = "block"; // 安全检查：避免对 null 调用 style
});? 进阶技巧：
- 封装为可复用函数，提升灵活性与复用性：
function setStyleByIds(ids, property, value) {
ids.forEach(id => {
const el = document.getElementById(id);
if (el && typeof el.style[property] !== 'undefined') {
el.style[property] = value;
}
});
}
// 使用示例：一键设置 display 和 color
setStyleByIds(["fill2a", "show2", "choice2"], "display", "block");
setStyleByIds(["fill2a", "show2"], "color", "#333");⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- document.getElementById() 返回 null（当 ID 不存在时），务必做存在性校验，否则会触发 Cannot set property 'display' of null 错误；
- 若需操作大量元素或频繁调用，可考虑使用 document.querySelectorAll() 配合属性选择器（如 [id^="fill"]），但本场景中明确指定 ID 列表时，getElementById 性能更优；
- 避免直接拼接字符串模拟“批量语法”（如 style.display=block for ids='...'），JavaScript 不支持此类声明式语法，必须通过编程逻辑实现。
总结：用数组管理 ID 列表 + forEach 迭代 + 安全访问 DOM，是兼顾简洁性、可读性与健壮性的最佳实践。
