Perché document.querySelectorAll restituisce uno StaticNodeList anziché una matrice reale?

Question

che mi bug che non posso fare document.querySelectorAll(...).map(...) anche in Firefox 3.6, e non riesco ancora a trovare una risposta, così ho pensato di cross-post su Quindi la domanda da questo blog:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

Qualcuno sa di un motivo tecnico per cui non si ottiene una matrice? O perché uno StaticNodeList non eredita da una matrice in modo tale da poter utilizzare map, concat, ecc.?

(BTW se è solo una funzione che si desidera, si può fare qualcosa di simile NodeList.prototype.map = Array.prototype.map; ... ma ancora una volta, perché è questa funzionalità (intenzionalmente?) Bloccato in primo luogo?)

Answer 1

Credo che sia una decisione filosofica del W3C. Il design del W3C DOM [spec] è alquanto ortogonale rispetto al design di JavaScript, in quanto il DOM è che significa che la piattaforma è neutrale.

decisioni come "getElementsByFoo() restituisce un ordinato NodeList" o "querySelectorAll() restituisce un StaticNodeList" sono molto intenzionale, in modo che le implementazioni non devono preoccuparsi di allineare la struttura dei dati restituiti in base a implementazioni dipendenti dalla lingua (come .map essere disponibile su Array in JavaScript e Ruby, ma non su elenchi in C#).

Il W3C mirano bassa: diranno un NodeList dovrebbe contenere una readonly .length property of type unsigned long perché credono ogni implementazione può almeno sostegno che, ma non diranno esplicitamente che l'operatore [] indice dovrebbe essere sovraccaricato di sostenere sempre elementi posizionali, perché non vogliono ostacolare un po 'di scarso linguaggio che vuole implementare getElementsByFoo() ma non supportare l'overloading dell'operatore. È una filosofia prevalente presente in gran parte delle specifiche.

John Resig ha voiced a similar option come il vostro, al quale he adds:

mio argomento non è tanto che NodeIterator non è molto DOM-come è che non è molto simile a JavaScript. Essa non approfitta delle caratteristiche presenti nel linguaggio Javascript e utilizzarli al meglio delle sue capacità ...

faccio un po 'empatia. Se il DOM è stato scritto specificamente con le funzionalità JavaScript, sarebbe molto meno complicato e più intuitivo da usare. Allo stesso tempo, capisco le decisioni progettuali del W3C.

Answer 2

Non lo so perché restituisce una lista di nodi invece di una matrice, forse perché come getElementsByTagName aggiornerà il risultato quando si aggiorna il DOM. In ogni caso un metodo molto semplice per trasformare quel risultato in un semplice array è:

Array.prototype.slice.call(document.querySelectorAll(...)); 

e quindi si può fare:

Array.prototype.slice.call(document.querySelectorAll(...)).map(...); 

Answer 3

Giusto per aggiungere a quanto detto Crescent,

se è solo una funzione che si desidera, si può fare qualcosa di simile NodeList.prototype.map = Array.prototype.map

Don Fallo! Non è affatto garantito il funzionamento.

No JavaScript o DOM/standard di BOM specifica che il costruttore-funzione di NodeList esiste anche come/window proprietà globale, o che il NodeList restituito da querySelectorAll erediterà da essa, o che la sua prototipo è scrivibile, o che la funzione Array.prototype.map funzionerà effettivamente su un NodeList.

Un NodeList può essere un 'oggetto host' (ed è uno, in IE e alcuni browser meno recenti). I metodi Array sono definiti come autorizzati a operare su qualsiasi "oggetto nativo" JavaScript che espone le proprietà numeriche e length, ma non sono obbligati a lavorare sugli oggetti host (e in IE, non lo fanno).

È fastidioso che non si ottengano tutti i metodi dell'array sugli elenchi DOM (tutti, non solo StaticNodeList), ma non esiste un modo affidabile per aggirarlo. Dovrete convertire ogni lista DOM si torna a una matrice manualmente:

Array.fromList= function(list) { 
    var array= new Array(list.length); 
    for (var i= 0, n= list.length; i<n; i++) 
     array[i]= list[i]; 
    return array; 
}; 

Array.fromList(element.childNodes).forEach(function() { 
    ... 
}); 

Answer 4

È possibile utilizzare ES2015 (ES6) spread operator:

[...document.querySelectorAll('div')]

convertirà StaticNodeList a matrice di elementi.

Ecco un esempio su come utilizzarlo.

[...document.querySelectorAll('div')].map(x => console.log(x.innerHTML))

<div>Text 1</div> 
 
<div>Text 2</div>

Answer 5

Penso che si possa fare semplicemente seguendo

Array.prototype.map.call(document.querySelectorAll(...), function(...){...}); 

Funziona perfetto per me