本文介绍如何用数组+循环替代重复调用 getElementsByClassName，以简洁、可维护的方式批量获取多个类名对应的 DOM 元素集合，显著减少冗余代码并提升可读性与扩展性。
本文介绍如何用数组+循环替代重复调用 `getelementsbyclassname`，以简洁、可维护的方式批量获取多个类名对应的 dom 元素集合，显著减少冗余代码并提升可读性与扩展性。
在前端开发中，当需要为多个具有不同类名的元素分别创建引用变量时，逐行书写 document.getElementsByClassName('xxx') 不仅冗长，还难以维护——新增类名需同步添加新变量声明，删除类名则易遗漏清理，极易引发潜在错误。
更优解是采用声明式集合 + 函数式遍历模式：先将所有目标类名存入数组，再统一执行查询并收集结果。示例如下：
const classNames = ['class-1', 'class-2', 'class-3', 'class-4', 'class-5', 'class-6', 'class-7', 'class-8']; const elements = classNames.map(className => document.getElementsByClassName(className));
✅ 推荐使用 map() 而非 forEach() + push()：map() 语义更清晰（“将类名映射为元素集合”），且直接返回新数组，避免副作用，符合函数式编程最佳实践。
此时，elements[0] 对应 'class-1' 的 HTMLCollection，elements[1] 对应 'class-2'，依此类推。如需解构为具名变量，可进一步使用数组解构语法：
立即学习“Java免费学习笔记（深入）”；
const [el1, el2, el3, el4, el5, el6, el7, el8] = elements; // 后续可直接使用 el1、el2 等，语义清晰，与原始写法完全兼容
⚠️ 注意事项：
- getElementsByClassName 返回的是 HTMLCollection（动态集合），若后续 DOM 变化可能影响其内容；如需静态快照，建议转为数组：Array.from(document.getElementsByClassName(className))；
- 若只需单个元素，优先使用 document.querySelector('.class-1') 或 document.getElementById()，性能更优；
- 类名数组支持动态生成（如从配置对象或 API 响应中提取），便于实现主题切换、模块化组件等高级场景。
总结：将重复逻辑抽象为数据驱动的映射操作，不仅大幅压缩代码量，更提升了可测试性与可配置性。一次定义类名列表，即可全局复用，是现代 JavaScript 工程化实践中值得推广的轻量级优化模式。
