Concat two nodelists

Question

I am trying to concat two nodelists using

var ul   = document.querySelector(\"ul\");
var down = document.getElementsByClassName(\"mobile\")[0];
var ul_child = Ar         


        

Answer 1

You can try converting the two NodeList objects to arrays first. Then calling concat on the results:

// 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 2

This is a bit of a different approach, but perhaps you could try combining them in your query selector:

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

Answer 3

Why don't you use one selector to select them at the same time than you do not need to concat them and you end up with an HTML Collection instead of an Array.

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

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

Answer 4

Set() ensures items are unique and the ES6 Spread operator makes it neat & tidy:

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