Loop através de elementos selecionados com document.querySelectorAll

Frequentemente, no desenvolvimento web, é necessário fazer um loop sobre os elementos selecionados. document.querySelectorAll fornece um objeto semelhante a um array que representa os elementos selecionados. No entanto, podem surgir problemas se a iteração for realizada diretamente no NodeList, resultando em itens adicionais aparecendo na saída.

Para percorrer corretamente os elementos selecionados, converta o NodeList em uma matriz usando a sintaxe de propagação. Ao iterar sobre a matriz resultante, você pode evitar os itens adicionais. Este método é ideal para ambientes JavaScript modernos com suporte para ES2015 e Babel.js.

Por exemplo, se você quiser fazer um loop nas caixas de seleção usando document.querySelectorAll('.check'):

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

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

Este snippet de código iterará corretamente apenas os elementos da caixa de seleção, sem nenhum item extra.