如何更高效地将不同类名的DOM元素存入独立变量？

针对你目前逐个声明变量存储元素的冗长写法，这里提供几种更高效的实现方式：

1. 对象统一存储（推荐，扩展性强） #

通过循环将元素存入对象属性，后续可通过对象属性直接访问对应元素集合：

const elements = {};
for (let i = 1; i <= 8; i++) {
  elements[`el${i}`] = document.getElementsByClassName(`class-${i}`);
}

// 访问示例：elements.el1、elements.el2

2. 解构赋值生成独立变量 #

如果仍需要保留独立变量的形式，可结合数组解构和循环简化代码：

const [el1, el2, el3, el4, el5, el6, el7, el8] = Array.from({ length: 8 }, (_, index) => {
  return document.getElementsByClassName(`class-${index + 1}`);
});

3. 批量选择元素（按需使用） #

若所有目标元素类名符合统一前缀规则，可直接用querySelectorAll批量获取：

// 匹配所有class以"class-"开头的元素
const allClassElements = document.querySelectorAll('[class^="class-"]');

注意：这种方式会匹配所有符合前缀的元素（比如class-10也会被包含），如果仅需要class-1到class-8，前两种方式更精准。

内容的提问来源于stack exchange，提问作者Igor Gryp