基于name属性选择元素：合并多组查询结果为单一数组的问题

嘿，你遇到的问题是因为每次循环都重新给elements变量赋值了，之前循环得到的数组会被直接覆盖，所以最后只能拿到最后一次循环的结果。下面给你两种简单的解决思路，第二种还能优化性能哦：

方法一：提前初始化数组并累加元素 #

先声明一个空数组用来存储所有结果，每次循环把当前获取到的元素数组里的内容添加进去就行：

var array = ["blue", "yellow", "red"];
var allElements = []; // 初始化一个空数组存所有元素

for(var i=0; i<array.length; i++) {
  // 这里建议给name属性值加引号，避免特殊字符导致选择器出错
  var elements = Array.from(document.querySelectorAll(`div[name="${array[i]}"]`));
  allElements.push(...elements); // 用展开运算符把当前数组的元素逐个加入
  // 或者用concat也可以：allElements = allElements.concat(elements);
}

注意：如果直接用allElements.push(elements)，会把整个数组作为一个元素塞进去，得到的是嵌套数组，所以一定要用展开运算符（...）或者concat来合并。

方法二：合并选择器，一次查询所有元素 #

这种方法更高效，因为减少了DOM查询的次数（DOM操作本身比较耗费资源）。我们可以把所有需要的选择器拼接成一个字符串，一次性获取所有元素：

var array = ["blue", "yellow", "red"];
// 把每个name转成合法的选择器片段，再用逗号拼接成完整选择器
var combinedSelector = array.map(name => `div[name="${name}"]`).join(', ');
var allElements = Array.from(document.querySelectorAll(combinedSelector));

这样只需要查询一次DOM就能拿到所有符合条件的元素，代码也更简洁。另外，给name属性值加上双引号能避免当name里有空格、特殊字符时出现选择器语法错误，比你原来的写法更安全。

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