Recorriendo los elementos seleccionados con document.querySelectorAll

Problema:
Al intentar recorrer los elementos seleccionados Al utilizar document.querySelectorAll, el resultado incluye información adicional irrelevante. elementos.

Ejemplo:

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

Salida:

10
item()
namedItem()

El problema surge porque document.querySelectorAll devuelve una NodeList, que es un objeto similar a una matriz. Sin embargo, NodeList no admite métodos de matriz como forEach.

Solución:

Para recorrer correctamente los elementos seleccionados, convierta NodeList en una matriz. Hay varias formas de hacer esto:

1. Sintaxis extendida (ES2015):

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

2. Array.from():

   const divs = Array.from(document.querySelectorAll('div'));
   divs.forEach((div) => {
     // Do something with each div
   });

3. Recorriendo índices de nodos:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i