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运算符使这个整洁＆amp;整齐：

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");

Answer 5

好的，我想在发布这个问题时，价差运算符很新。但也可以这样做

const list1 = document.querySelectorAll(".some-selector")
const list2 = document.querySelectorAll(".some-other-selector")

const filters = Array.prototype.concat.call(...list1 , ...list2 )

Concat有两个节点列表

5 个答案: