javascript - 我应该如何在同一个循环中遍历多个 getElementsByClassName() 调用的结果？

Question

我想这样做：

a1 = document.getElementsByClassName('classA');
a2 = document.getElementsByClassName('classB');
a3 = a1.concat(a2);

for (var i=0; i<a3.length; ++i) {

}

即获取classA 的所有元素，classB 的所有元素，然后以一种允许我遍历所有元素的方式组合它们。它不起作用，因为 getElementsByClassName 不返回标准数组。

这可行，但必须有一种更明智的方式：

var els = [];
var e1 = document.getElementsByClassName('classA');
var e2 = document.getElementsByClassName('classB');
[].forEach.call(e1, function(el) { els.push(el); });
[].forEach.call(e2, function(el) { els.push(el); });

Answer 1

在现代浏览器中，您可以使用：

var a = document.querySelectorAll('.classA, .classB');

这将找到所有具有“classA”或“classB”的元素。您可以在此处找到更多信息和浏览器兼容性表。

Answer 2

该getElementsByClassName方法返回一个HTMLCollection而不是一个数组。它是一个类似数组的对象，但不能在其上使用所有数组方法。

使用该方法将集合转换为数组slice，然后您可以将它们连接起来：

var a3 = Array.prototype.slice.call(a1).concat(Array.prototype.slice.call(a2));

注意：这需要 IE9 或更高版本。