Converti NodeList di serie

Question

Sto avendo un momento difficile convertire un NodeList ad una matrice in IE 8. I seguenti opere perfettamente in Chrome, ma in IE 8 toArray() non è riconosciuto come valido:

NodeList.prototype.toArray = function() { 
    var a = []; 

    for (var i = 0, len = this.length; i < len; i++) { 
     a[i] = this[i]; 
    } 

    return a; 
} 

document.all.tags("div").toArray(); 

I ho provato ad aggiungere una funzione prototipo a un array solo per verificare il mio equilibrio e funziona correttamente. Questo mi fa pensare che IE 8 in realtà non restituisce un NodeList? Ecco un esempio completo:

http://jsfiddle.net/e4RbH/

Che cosa sto facendo di sbagliato?

Answer 1

In primo luogo, non utilizzare document.all - non è standard e deprecato. Usa document.getElementsByTagName per ottenere gli elementi DIV nel tuo caso.

In secondo luogo, non estendere gli oggetti DOM come NodeList - gli oggetti incorporati sono una razza molto strana e non sono tenuti a comportarsi come qualsiasi altro oggetto con cui generalmente lavori. Vedi questo articolo per una spiegazione approfondita di questo: What's wrong with extending the DOM.

Answer 2

IE non supporta NodeList nel modo standard. Questo è il motivo per cui devi pubblicare il tuo spazio dei nomi e NON estendere gli oggetti principali del browser.

È possibile eseguire alert(typeof window.NodeList) e vedere se non è definito o no.

Answer 3

vecchia questione, ma qui è un provato & vero metodo:

var nodes=document.querySelectorAll("div"); // returns a node list 
nodes=Array.prototype.slice.call(nodes); // copies to an array 

Spiegazione

• document.querySelectorAll utilizza un selettore CSS stile di trovare elementi e restituisce un elenco dei nodi. Funziona a partire da IE 8.
• Il metodo slice copia una parte di una raccolta di tipo array (in questo caso tutto) in una nuova matrice.
• call permette di prendere in prestito un metodo da un oggetto da utilizzare su un altro

Per trovare l'elenco dei nodi si potrebbe avere utilizzato anche `document.getElementsByTagName(), ma questo è più flessibile.

Answer 4

Se siete alla ricerca di una risposta moderna utilizzando ES6:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

var nodes = document.querySelectorAll('div'); 
nodes = Array.from(nodes);