Concat有两个节点列表

Question

我试图使用连接两个节点列表

var ul   = document.querySelector("ul");
var down = document.getElementsByClassName("mobile")[0];
var ul_child = Array.prototype.concat.call(ul.children,down.children);

但是这只返回ul nodelist中的两个节点而忽略其他节点.连接两个nodelsits最有效的是什么？我想避免粗暴地循环它们

Answer 1

为什么不使用一个选择器同时选择它们而不需要连接它们,最终得到的是HTML Collection而不是Array.

var elems = document.querySelectorAll("ul > li, .mobile > *");
console.log(elems);

<ul><li>x</li></ul>
<div class="mobile">y</div>

Answer 2

ES6 Spread运算符使这个整洁有序:

var elems = [
    ...document.querySelectorAll(query1),
    ...document.querySelectorAll(query2)
];

Answer 3

您可以尝试首先将两个NodeList对象转换为数组.然后调用concat结果:

// Convert the first list to an array
var ul_list = document.querySelector("ul"),
    ul_children_array = Array.prototype.slice.call(ul_list.children);

// Convert the second list to an array
var down_list = document.getElementsByClassName("mobile")[0],
    down_children_array = Array.prototype.slice.call(down_list.children);

var ul_child_array = Array.prototype.concat.call(ul_children_array, down_children_array);

Answer 4

这是一种不同的方法，但也许您可以尝试在查询选择器中组合它们：

var ul_down   = document.querySelectorAll("ul,.mobile:first-child");