本文介绍一种简洁、可维护的方式，通过数组与循环批量获取具有不同类名的 DOM 元素，避免重复书写冗长的 getElementsByClassName 语句，显著提升代码可读性与扩展性。
本文介绍一种简洁、可维护的方式，通过数组与循环批量获取具有不同类名的 dom 元素，避免重复书写冗长的 `getelementsbyclassname` 语句，显著提升代码可读性与扩展性。
在前端开发中，当需要为多个具有不同类名的 DOM 元素分别创建引用变量时（例如 el1, el2, …），若采用逐行调用 document.getElementsByClassName() 的方式，不仅代码冗余、难以维护，还容易因手误导致命名或索引错误。更优解是将类名抽象为数据，用程序逻辑统一处理。
✅ 推荐方案：类名数组 + forEach 批量采集
const classNames = ['class-1', 'class-2', 'class-3', 'class-4',
'class-5', 'class-6', 'class-7', 'class-8'];
const elements = [];
classNames.forEach(className => {
const nodeList = document.getElementsByClassName(className);
elements.push(nodeList);
});
// 按需解构或命名引用（语义清晰，位置明确）
const [el1, el2, el3, el4, el5, el6, el7, el8] = elements;? 提示：getElementsByClassName() 返回的是 HTMLCollection（动态集合），如需转为静态数组以便使用 map/filter 等方法，可写为 [...nodeList] 或 Array.from(nodeList)。
? 进阶优化：对象映射（推荐用于语义化访问）
若希望变量名更具可读性（如 headerBtns、sidebarItems），可构建键值映射：
const classMap = {
headerButtons: 'class-1',
mainContent: 'class-2',
footerLinks: 'class-3',
// ... 更多语义化键名
};
const $ = {};
Object.entries(classMap).forEach(([key, className]) => {
$.key = document.getElementsByClassName(className); // ❌ 错误：不会动态赋值
});
// ✅ 正确写法：
Object.entries(classMap).forEach(([key, className]) => {
$[key] = document.getElementsByClassName(className);
});
// 使用示例
console.log($.headerButtons); // HTMLCollection of elements with class "class-1"
console.log($.mainContent); // HTMLCollection of elements with class "class-2"⚠️ 注意事项
- getElementsByClassName 返回的是实时集合（live collection），DOM 变化会自动反映在该集合中；若需快照式操作，建议立即转换为数组。
- 类名拼写必须严格匹配（区分大小写、空格、连字符），建议将类名常量化以避免硬编码错误。
- 若目标元素唯一，优先考虑 document.querySelector('.class-1')；若需多个且跨类名，本方案仍是最简通用解。
✅ 总结
用数组管理类名、用循环统一获取元素，是消除重复代码、提升可维护性的关键实践。配合解构赋值或对象映射，既能保持代码简洁，又能兼顾语义表达与后期扩展——尤其适用于组件化模板、表单字段批量初始化等场景。
