Percorrendo os elementos selecionados com document.querySelectorAll

Problema:
Ao tentar percorrer os elementos selecionados usando document.querySelectorAll, a saída inclui informações adicionais e irrelevantes itens.

Exemplo:

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

Saída:

10
item()
namedItem()

O problema surge porque document.querySelectorAll retorna um NodeList, que é um objeto semelhante a um array. No entanto, NodeList não oferece suporte a métodos de array como forEach.

Solução:

Para percorrer corretamente os elementos selecionados, converta o NodeList em um array. Existem várias maneiras de fazer isso:

1. Spread Syntax (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. Loop sobre índices de nós:

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