如何高效批量获取多个类名对应的 DOM 元素-js教程-PHP中文网

如何高效批量获取多个类名对应的 DOM 元素

本文介绍一种简洁、可扩展的方式，通过数组与循环批量获取多个 class 名的 DOM 元素，避免重复书写冗长的 document.getElementsByClassName() 语句，显著提升代码可维护性与可读性。

本文介绍一种简洁、可扩展的方式，通过数组与循环批量获取多个 class 名的 dom 元素，避免重复书写冗长的 `document.getelementsbyclassname()` 语句，显著提升代码可维护性与可读性。

在前端开发中，当需要为多个具有不同类名（如 class-1 至 class-8）的元素分别创建引用变量时，逐行调用 document.getElementsByClassName() 不仅代码冗余，还难以维护——新增类名需同步增加新行，修改逻辑易出错，且无法动态扩展。

更高效的做法是：将目标类名统一声明为数组，再通过遍历批量获取对应元素集合，并存入结构化容器中。推荐使用 Array.prototype.forEach() 或更现代的 map() 实现：

const classNames = ['class-1', 'class-2', 'class-3', 'class-4', 'class-5', 'class-6', 'class-7', 'class-8'];
const elementCollections = classNames.map(className => 
  document.getElementsByClassName(className)
);

此时，elementCollections[0] 即等价于原 el1，elementCollections[1] 对应 el2，依此类推。若需解构为独立变量（如保留原有命名习惯），可进一步使用数组解构赋值：

const [el1, el2, el3, el4, el5, el6, el7, el8] = elementCollections;

✅ 优势说明：

✅ 可维护性强：增删类名只需修改 classNames 数组，无需改动逻辑；
✅ 语义清晰：类名集中管理，便于复用或配置化（例如从 JSON 配置加载）；
✅ 兼容性好：getElementsByClassName 返回 HTMLCollection，map() 可安全处理（注意：HTMLCollection 需先转为数组才能直接 map，但现代写法中 document.getElementsByClassName() 在 map 回调内调用是安全的；如需严格类型保障，可用 [...document.getElementsByClassName(className)] 转为数组）；
✅ 易于拓展：可轻松结合 querySelectorAll 支持复合选择器（如 .class-1.active），或添加错误处理与空值校验。

⚠️ 注意事项：

getElementsByClassName() 返回的是实时 HTMLCollection，若后续 DOM 动态增删匹配元素，其内容会自动更新；若需静态快照，建议用 Array.from(document.getElementsByClassName(className)) 或 document.querySelectorAll('.className')（返回静态 NodeList）；
类名拼写错误或无匹配元素时，返回空集合（长度为 0），建议在关键场景做存在性判断；
若目标是单个唯一元素，优先使用 document.querySelector() + 类选择器，性能更优且语义更明确。

综上，以数据驱动代替硬编码，是提升 DOM 操作代码质量的关键一步——让结构决定逻辑，而非让逻辑散落在多行相似语句中。