Come eseguire il looping degli elementi selezionati con document.querySelectorTutto

Question

Sto provando il ciclo su elementi selezionati che hanno interrogato con document.querySelectorAll, ma come?

Per esempio io uso:

var checkboxes = document.querySelectorAll('.check'); 
for(i in checkboxes) { 
    console.log(checkboxes[i]); 
} 

uscita:

<input id="check-1" class="check" type="checkbox" name="check"> 
<input id="check-2" class="check" type="checkbox" name="check"> 
<input id="check-3" class="check" type="checkbox" name="check"> 
<input id="check-4" class="check" type="checkbox" name="check"> 
<input id="check-5" class="check" type="checkbox" name="check"> 
<input id="check-6" class="check" type="checkbox" name="check"> 
<input id="check-7" class="check" type="checkbox" name="check"> 
<input id="check-8" class="check" type="checkbox" name="check"> 
<input id="check-9" class="check" type="checkbox" name="check"> 
<input id="check-10" class="check" type="checkbox" name="check" checked=""> 

10 
item() 
namedItem() 

Il mio problema è che alla fine questo metodo restituisce 3 oggetti extra. Come posso farlo correttamente?

Answer 1

for in Il ciclo non è consigliato per gli array e gli oggetti tipo array - capisci perché. Non ci possono essere più di semplici voci con numero di indice, ad esempio la proprietà length o alcuni metodi, ma for in effettuerà il ciclo di tutte. Utilizzare

for (var i = 0, len = checkboxes.length; i < len; i++) { 
    //work with checkboxes[i] 
} 

o

for (var i = 0, element; element = checkboxes[i]; i++) { 
    //work with element 
} 

Il secondo modo non può essere utilizzato se alcuni elementi in array può essere falsy (non è il tuo caso), ma può essere più leggibile, perché non è necessario per usare la notazione [] ovunque.

Answer 2

Una bella alternativa è:

[].forEach.call(
    document.querySelectorAll('.check'), 
    function (el) { 
     console.log(el); 
    } 
); 

ma come ha sottolineato, è necessario utilizzare un ciclo for.

Answer 3

Il mio preferito utilizza spread operator per convertirlo in array e quindi utilizzare forEach per il ciclo.

var div_list = document.querySelectorAll('div'); // returns NodeList 
var div_array = [...div_list]; // converts NodeList to Array 
div_array.forEach(div => { 

// do something awesome with each div 

}); 

codice che ho in ES2015 e utilizzare Babel.js quindi non ci dovrebbe essere un problema di supporto del browser.

Answer 4

Con ES6, v'è un metodo statico Array.from possono avvalersi delle Array metodi non statici (forEach, carta, filtri, ..):

Array.from(document.querySelectorAll('div')).forEach((element,index) => 
{ 

    // handle "element" 

}); 

altro, l'uso di Array.from dal querySelector fornisce item metodo:

var all=document.querySelectorAll('div'); 
// create range [0,1,2,....,all.length-1] 
Array.from({length:all.length},(v,k)=>k).forEach((index)=>{ 
    let element=all.item(index); 
}); 

Answer 5

sembra che Firefox 50+, 51+ Chrome e Safari 10+ ora tutti sostenere la .forEach funzioni per gli oggetti NodeList. Nota: .forEach non è supportato in Internet Explorer, quindi prendere in considerazione uno degli approcci precedenti se è richiesto il supporto IE.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p'); 
 
paragraphs.forEach(p => console.log(p));

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p> 
 
<p>paragraph 4</p> 
 
<p>paragraph 5</p>

Answer 6

ES6 const checkboxes = Array.from(document.querySelectorAll('.check'));