Recorrer los elementos seleccionados con document.querySelectorAll

A menudo, en el desarrollo web, es necesario recorrer los elementos seleccionados. document.querySelectorAll proporciona un objeto similar a una matriz que representa los elementos seleccionados. Sin embargo, pueden surgir problemas si la iteración se realiza directamente en NodeList, lo que da como resultado que aparezcan elementos adicionales en la salida.

Para recorrer correctamente los elementos seleccionados, convierta NodeList en una matriz usando sintaxis extendida. Al iterar sobre la matriz resultante, puede evitar los elementos adicionales. Este método es ideal para entornos JavaScript modernos con soporte para ES2015 y Babel.js.

Por ejemplo, si desea recorrer casillas de verificación usando document.querySelectorAll('.check'):

var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});

Este fragmento de código iterará correctamente solo sobre los elementos de la casilla de verificación sin ningún elemento adicional.