Конкатентные два нодлиста

Я пытаюсь объединить два нодлиста, используя

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

Но это возвращает только два узла из ul nodelist и игнорирует другие. Что является наиболее эффективным для concat двух nodelsits? Я хотел бы избежать грубой петли их

Ответ 1

Почему бы вам не использовать один селектор, чтобы выбирать их одновременно, чем вам не нужно их конкатенировать, и в итоге вы получаете коллекцию HTML вместо массива.

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

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

Ответ 2

Оператор ES6 Spread делает это аккуратным и аккуратным:

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

Ответ 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);

Ответ 4

Это немного другой подход, но, возможно, вы можете попробовать объединить их в вашем селекторе запросов:

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