Cómo recorrer los elementos seleccionados con document.querySelectorAll

Question

Estoy probando el bucle en los elementos seleccionados que consultaron con document.querySelectorAll, pero ¿cómo?

Por ejemplo yo uso:

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

Salida:

<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() 

Mi problema es que al final este método devuelve 3 artículos adicionales. ¿Cómo puedo hacerlo correctamente?

Answer 1

for in No se recomienda el bucle para matrices y objetos similares a una matriz; ya ve por qué. Puede haber algo más que solo elementos indexados por número, por ejemplo, la propiedad length o algunos métodos, pero for in recorrerá todos ellos. Utilizar cualquiera

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 
} 

La segunda manera no se puede utilizar si algunos elementos de matriz pueden ser Falsy (no su caso), pero puede ser más fácil de leer, ya que no es necesario para usar la notación [] en todas partes.

Answer 2

Una buena alternativa es:

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

pero como se ha señalado, se debe utilizar un bucle.

Answer 3

Mi favorito es usar spread operator para convertirlo a una matriz y luego usar forEach para bucles.

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 

}); 

código I en ES2015 y utilizar Babel.js lo que no debería ser un problema de soporte del navegador.

Answer 4

Con ES6, no es un método estático Array.from para tomar ventajas de Array métodos no estáticos (forEach, mapa, filtra, ..):

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

    // handle "element" 

}); 

Otro, el uso de Array.from desde querySelector proporciona item método:

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

parece que Firefox 50+, 51+ Chrome y Safari 10+ ahora son contribuyentes al .forEach función para objetos NodeList. Nota: .forEach no es compatible con Internet Explorer, por lo tanto, considere uno de los enfoques anteriores si se requiere soporte de 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'));