如何高效地将多个不同类名的 DOM 元素分别存入变量

本文介绍一种简洁、可维护的方式，通过数组与循环批量获取具有不同类名的 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’)；若需多个且跨类名，本方案仍是最简通用解。

✅ 总结

用数组管理类名、用循环统一获取元素，是消除重复代码、提升可维护性的关键实践。配合解构赋值或对象映射，既能保持代码简洁，又能兼顾语义表达与后期扩展——尤其适用于组件化模板、表单字段批量初始化等场景。