合并两个由querySelectorAll返回的元素列表

Question

我希望合并两个由document.querySelectorAll返回的元素列表。

以下是我尝试过但效果不佳的代码：

var ca = document.querySelectorAll(".classA");
    ca = ca + document.querySelectorAll(".classB");

我需要合并元素列表，因为我需要在FOR循环中只使用一个列表：

for(var i=0; i<ca.length; i++) console.log(ca[i].tagName);

如何正确合并两个这样的列表？

- user971637

Answer 1

你也可以只执行

var ca = document.querySelectorAll(".classA, .classB");

- Biketire

---

但是这需要 FF 3.1+、Safari 3.1+ 或 IE8+。无论您使用逗号连接选择器还是使用单独的 querySelectorAll() 调用，浏览器支持都没有区别。 - BoltClock

实际上，使用合并选择器时，输出顺序是每个元素的文档顺序，而在两个合并的数组中，顺序是来自第一个数组的项后跟来自第二个数组的项。这种差异微妙但存在，并且可以根据您的使用产生不同的结果。 - blackmamba

Answer 2

使用 slice 将一个节点列表转换为数组，并使用 concat 合并两个数组：

var ca = Array.prototype.slice.call(document.querySelectorAll(".classA")).concat(Array.prototype.slice.call(document.querySelectorAll(".classB")));

- Amir Popovich