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

Часто в веб-разработке требуется циклическое перебор выбранных элементов. document.querySelectorAll предоставляет объект, подобный массиву, представляющий выбранные элементы. Однако могут возникнуть проблемы, если итерация выполняется непосредственно в NodeList, что приводит к появлению дополнительных элементов в выходных данных.

Чтобы правильно пройти по выбранным элементам, преобразуйте NodeList в массив, используя синтаксис расширения. Вместо этого, перебирая результирующий массив, вы можете избежать дополнительных элементов. Этот метод идеально подходит для современных сред JavaScript с поддержкой ES2015 и Babel.js.

Например, если вы хотите перебрать флажки с помощью document.querySelectorAll('.check'):

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

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

Этот фрагмент кода будет корректно перебирать только элементы флажка без каких-либо дополнительных элементов.