Циклическое перебор выбранных элементов с помощью document.querySelectorAll

Проблема:
При попытке перебрать выбранные элементы используя document.querySelectorAll, выходные данные включают дополнительные, нерелевантные items.

Пример:

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

Вывод:

10
item()
namedItem()

Проблема возникает потому, что document.querySelectorAll возвращает NodeList, который представляет собой объект, подобный массиву. Однако NodeList не поддерживает такие методы массива, как forEach.

Решение:

Чтобы правильно перебирать выбранные элементы, преобразуйте NodeList в массив. Есть несколько способов сделать это:

1. Распространение синтаксиса (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. Цикл по индексам узлов:

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