如何用纯JavaScript合并getElementsByTagName返回的集合以单循环遍历

嘿，这个问题我太熟悉啦！你原来的代码之所以行不通，是因为document.getElementsByTagName()返回的是HTMLCollection——这是一种类数组对象，但它并不是真正的JavaScript数组，所以没有concat()方法，直接调用肯定会报错。下面给你几种纯JS的解决思路，都能帮你把多个元素集合合并后在单个循环里遍历：

方法1：用Array.from()转换后合并（ES6+） #

先把每个HTMLCollection转换成真正的数组，再用concat()合并，这样就能正常遍历了：

var textareas = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");

// 把每个类数组集合转成数组，再依次合并
var concatenated = Array.from(textareas).concat(Array.from(inputs)).concat(Array.from(selects));

for(var i = 0; i < concatenated.length; i++) {
  // 这里写你对每个元素的操作逻辑，比如修改样式或绑定事件
  concatenated[i].style.border = "1px solid #ccc";
}

方法2：用展开运算符简化合并（ES6+） #

这是ES6里更简洁的写法，展开运算符...可以直接把类数组对象的元素展开成数组项，一步完成合并：

var textareas = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");

// 一次性合并所有集合为数组
var concatenated = [...textareas, ...inputs, ...selects];

// 用forEach遍历（ES6+支持），比传统for循环更清爽
concatenated.forEach(element => {
  element.addEventListener("change", function() {
    console.log(this.value);
  });
});

方法3：兼容旧浏览器的写法（无ES6依赖） #

如果你的项目需要兼容IE这类不支持ES6的旧浏览器，可以用Array.prototype.slice.call()把类数组转成数组：

var textareas = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");

// 封装一个转数组的工具函数
function convertToArray(collection) {
  return Array.prototype.slice.call(collection);
}

// 转换后合并
var concatenated = convertToArray(textareas).concat(convertToArray(inputs)).concat(convertToArray(selects));

// 传统for循环遍历
for(var i = 0; i < concatenated.length; i++) {
  console.log(concatenated[i].tagName);
}

备选方案：不用合并，直接遍历每个集合 #

如果你的元素数量特别多，合并数组会占用额外内存，那可以直接定义一个统一的处理函数，依次遍历每个集合：

var textareas = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");

// 统一的元素处理逻辑
function handleElement(element) {
  // 这里写你的操作
  element.classList.add("form-control");
}

// 依次遍历每个集合
for(var i = 0; i < textareas.length; i++) {
  handleElement(textareas[i]);
}
for(var i = 0; i < inputs.length; i++) {
  handleElement(inputs[i]);
}
for(var i = 0; i < selects.length; i++) {
  handleElement(selects[i]);
}

根据你的项目环境选合适的方法就行啦～现代项目推荐用方法2，代码最简洁；兼容旧浏览器就用方法3；元素量极大的话，备选方案更省内存。

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