如何通过循环拼接字符串命名JS变量获取DOM元素？

首先，直接动态命名变量（比如box0、box1这类）的做法不推荐，因为会污染作用域、增加代码维护难度。更规范且实用的方式是用数组来存储这些元素，操作起来更灵活。

推荐方案：使用数组存储 #

方法1：基础循环写法 #

const boxes = [];
for (let i = 0; i < 5; i++) {
  // 注意选择器是.box1到.box5，所以要给i加1
  const currentBox = document.querySelector(`.box${i + 1}`);
  boxes.push(currentBox);
}

// 访问方式：boxes[0]对应原box0，boxes[1]对应原box1，以此类推

方法2：简洁的Array.from写法 #

如果想更简洁，可以用Array.from直接生成数组：

const boxes = Array.from({ length: 5 }, (_, idx) => {
  return document.querySelector(`.box${idx + 1}`);
});

用数组的好处很明显：后续可以轻松遍历所有元素（比如boxes.forEach(box => { ... })），也不用担心变量名冲突或全局污染。

不推荐的动态变量写法（仅作演示） #

如果一定要实现你说的动态命名变量，虽然能做到，但强烈不建议这么做：

// 仅演示，实际开发别用
for (let i = 0; i < 5; i++) {
  // 全局作用域下通过window对象创建变量
  window[`box${i}`] = document.querySelector(`.box${i + 1}`);
}
// 之后可以用box0、box1等访问元素，但这种写法会污染全局作用域，风险高

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