Come convertire un elenco di nodi DOM in un array in Javascript?

Ho una funzione Javascript che accetta un elenco di nodi HTML, ma si aspetta un array Javascript (esegue alcuni metodi Array su quello) e voglio alimentarlo l'output di Document.getElementsByTagNameche restituisce un elenco di nodi DOM.

Inizialmente ho pensato di utilizzare qualcosa di semplice come:

Array.prototype.slice.call(list,0)

E questo funziona bene in tutti i browser, tranne ovviamente Internet Explorer che restituisce l'errore "Oggetto JScript previsto", poiché apparentemente l'elenco dei nodi DOM restituito dai Document.getElement*metodi non è un oggetto JScript sufficiente per essere l'obiettivo di una chiamata di funzione.

Avvertenze: non mi dispiace scrivere codice specifico per Internet Explorer, ma non sono autorizzato a utilizzare alcuna libreria Javascript come JQuery perché sto scrivendo un widget da incorporare in un sito Web di terze parti e non posso caricare librerie esterne che creerà conflitto per i client.

Il mio ultimo sforzo disperato è quello di iterare l'elenco dei nodi DOM e creare un array da solo, ma c'è un modo migliore per farlo?

Le NodeList sono oggetti host , l'utilizzo del Array.prototype.slicemetodo sugli oggetti host non è garantito per funzionare, la specifica ECMAScript afferma:

Se la funzione slice può essere applicata correttamente a un oggetto host dipende dall'implementazione.

Ti consiglierei di creare una semplice funzione per iterare NodeListe aggiungere ogni elemento esistente a un array:

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

AGGIORNARE:

Come suggeriscono altre risposte, ora puoi utilizzare negli ambienti moderni la sintassi diffusa o il Array.frommetodo:

const array = [ ...nodeList ] // or Array.from(nodeList)

Ma a pensarci bene, immagino che il caso d'uso più comune per convertire un NodeList in un Array sia iterare su di esso, e ora l' NodeList.prototypeoggetto ha il forEachmetodo in modo nativo , quindi se ti trovi in ​​un ambiente moderno puoi usarlo direttamente, o avere un pollyfill.

In es6 puoi semplicemente usare come segue:

• Operatore di diffusione

   var elements = [... nodelist]

• Utilizzando Array.from

   var elements = Array.from(nodelist)

ulteriori riferimenti su https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Utilizzando spread (ES2015) , è facile come:[...document.querySelectorAll('p')]

(opzionale: usa Babel per trasferire il codice ES6 sopra alla sintassi ES5)

Provalo nella console del tuo browser e guarda la magia:

for( links of [...document.links] )
  console.log(links);

Usa questo semplice trucco

<Your array> = [].map.call(<Your dom array>, function(el) {
    return el;
})

Sebbene non sia proprio uno shim appropriato, poiché non ci sono specifiche che richiedono di lavorare con elementi DOM, ne ho creato uno per consentirti di usarlo slice()in questo modo: https://gist.github.com/brettz9/6093105

AGGIORNAMENTO : Quando ho sollevato questo problema con l'editor della specifica DOM4 (chiedendo se potevano aggiungere le proprie restrizioni agli oggetti host (in modo che la specifica richiedesse agli implementatori di convertire correttamente questi oggetti se usati con metodi array) oltre la specifica ECMAScript che aveva consentito l'indipendenza dall'implementazione), ha risposto che "Gli oggetti host sono più o meno obsoleti per ES6 / IDL." Vedo per http://www.w3.org/TR/WebIDL/#es-array che le specifiche possono utilizzare questo IDL per definire "oggetti array di piattaforme" ma http://www.w3.org/TR/domcore/ non sembra che stia usando il nuovo IDL per HTMLCollection(anche se sembra che lo stia facendo perché Element.attributesafferma solo esplicitamente che sta usando WebIDL per DOMString e DOMTimeStamp). Lo vedo[ArrayClass](che eredita da Array.prototype) viene utilizzato per NodeList(ed NamedNodeMapè ora deprecato a favore dell'unico elemento che lo utilizzerebbe ancora Element.attributes). In ogni caso, sembra che stia per diventare uno standard. L'ES6 Array.frompotrebbe anche essere più conveniente per tali conversioni che dover specificare Array.prototype.slicee semanticamente più chiaro di [].slice()(e la forma più breve, Array.slice()(un "array generico"), per quanto ne so, non è diventata un comportamento standard).

Oggi, nel 2018, potremmo usare ECMAScript 2015 (6a edizione) o ES6, ma non tutti i browser possono capirlo (ad es. IE non lo capisce tutto). Se vuoi puoi usare ES6 come segue: var array = [... NodeList];( come operatore di spread ) o var array = Array.from(NodeList);.

In altri casi (se non puoi usare ES6) puoi usare il modo più breve per convertire un NodeListin un Array:

var array = [].slice.call(NodeList, 0);.

Per esempio:

var nodeList = document.querySelectorAll('input');
//we use "{}.toString.call(Object).slice(8, -1)" to find the class name of object
console.log({}.toString.call(nodeList).slice(8, -1)); //NodeList

var array = [].slice.call(nodeList, 0);
console.log({}.toString.call(array).slice(8, -1)); //Array

var result = array.filter(function(item){return item.value.length > 5});

for(var i in result)
  console.log(result[i].value); //credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Ma se si desidera iterare DOMsolo facilmente l'elenco dei nodi, non è necessario convertire un file NodeLista in un file Array. È possibile eseguire il ciclo degli elementi in un NodeListutilizzo:

var nodeList = document.querySelectorAll('input');
// Calling nodeList.item(i) isn't necessary in JavaScript
for(var i = 0; i < nodeList.length; i++)
    console.log(nodeList[i].value); //trust, credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Non essere tentato di usare for...ino for each...inenumerare gli elementi nell'elenco, poiché ciò enumererà anche la lunghezza e le proprietà dell'elemento NodeListe causerà errori se il tuo script presume che abbia a che fare solo con oggetti elemento. Inoltre, for..innon è garantito visitare le proprietà in un ordine particolare. for...ofi cicli verranno eseguiti correttamente sugli oggetti NodeList.

Vedi anche:

• Documentazione di NodeList

var arr = new Array();
var x= ... get your nodes;

for (i=0;i<x.length;i++)
{
  if (x.item(i).nodeType==1)
  {
    arr.push(x.item(i));
  }
}

Questo dovrebbe funzionare, attraversare il browser e ottenere tutti i nodi "elemento".