CONCAT due nodelists

Question

sto cercando di concat due nodelists utilizzando

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

Ma questo restituisce solo due nodi da nodelist ul e ignorare gli altri. Qual è il più valido per concatenare due nodelsits? Vorrei evitare di eseguire il ciclo bruteo

Answer 1

Perché non si usa un selettore per selezionarli nello stesso momento in cui non è necessario concatenarli e si finisce con una raccolta HTML invece di una matrice.

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

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

Answer 2

È possibile provare la conversione dei due NodeList oggetti agli array prima. Poi chiamando concat sui risultati:

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

L'operatore diffusione ES6 rende questo pulite & ordinato:

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