Как итерировать NodeList без метода forEach?

Итерация NodeList в JavaScript

NodeList — это коллекция DOM элементов, которую возвращают методы вроде querySelectorAll(). Хотя в современных браузерах у NodeList есть метод forEach(), иногда нужно использовать альтернативные способы для поддержки старых браузеров или для особых случаев.

Способы итерации без forEach

1. for цикл Классический способ, работает везде. Используется length свойство NodeList.

2. for...of цикл Работает с итерируемыми объектами. NodeList стал итерируемым в современных браузерах.

3. while цикл Старая классика, работает во всех браузерах.

4. Преобразование в массив Преобразуем NodeList в обычный массив и используем стандартные методы массива.

5. Функция Array.from() Самый удобный способ преобразования NodeList в массив.

Примеры кода

// Получаем NodeList
const elements = document.querySelectorAll('.item');

// СПОСОБ 1: for цикл (самый универсальный)
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]);
  elements[i].addEventListener('click', () => {
    console.log('Нажато на элемент', i);
  });
}

// СПОСОБ 2: for...of цикл (современный и читаемый)
for (const element of elements) {
  console.log(element);
  element.addEventListener('click', (e) => {
    console.log('Нажато на', e.target);
  });
}

// СПОСОБ 3: while цикл
let i = 0;
while (i < elements.length) {
  console.log(elements[i]);
  i++;
}

// СПОСОБ 4: Преобразование в массив через Array.from()
Array.from(elements).forEach((element, index) => {
  console.log(index, element);
  element.classList.add('processed');
});

// СПОСОБ 5: Преобразование через spread оператор
[...elements].forEach((element) => {
  element.style.color = 'red';
});

// СПОСОБ 6: Преобразование через call() на Array методы
Array.prototype.forEach.call(elements, (element) => {
  console.log(element);
});

// СПОСОБ 7: Slice с call()
Array.prototype.slice.call(elements).forEach((element) => {
  console.log(element);
});

Практические примеры

// Пример 1: Добавление класса к множеству элементов
const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].classList.add('btn-styled');
  buttons[i].dataset.index = i;
}

// Пример 2: Сбор данных из элементов
const items = document.querySelectorAll('[data-id]');
const ids = [];

for (const item of items) {
  ids.push(item.dataset.id);
}

const ids2 = Array.from(items).map(item => item.dataset.id);

// Пример 3: Условная обработка элементов
const inputs = document.querySelectorAll('input[type="text"]');

for (const input of inputs) {
  if (input.value.length > 0) {
    input.style.backgroundColor = 'lightgreen';
  } else {
    input.style.backgroundColor = 'lightcoral';
  }
}

// Пример 4: Удаление элементов
const toRemove = document.querySelectorAll('.temp-element');

// ПРАВИЛЬНО: итерировать в обратном порядке
for (let i = toRemove.length - 1; i >= 0; i--) {
  toRemove[i].remove();
}

// Пример 5: Фильтрация и трансформация
const allDivs = document.querySelectorAll('div');

const activeDivs = Array.from(allDivs)
  .filter(div => div.classList.contains('active'))
  .map(div => div.textContent);

console.log(activeDivs);

// Пример 6: Проверка наличия элемента
const elements = document.querySelectorAll('.item');

const hasActiveItem = Array.from(elements).some(el => 
  el.classList.contains('active')
);

const allHaveData = Array.from(elements).every(el => 
  el.dataset.id !== undefined
);

Сравнение производительности

const elements = document.querySelectorAll('.item');

// for цикл - самый быстрый
console.time('for loop');
for (let i = 0; i < elements.length; i++) {
  void elements[i];
}
console.timeEnd('for loop');

// for...of - немного медленнее
console.time('for...of');
for (const el of elements) {
  void el;
}
console.timeEnd('for...of');

// Array.from + forEach - медленнее всех
console.time('Array.from + forEach');
Array.from(elements).forEach(el => {
  void el;
});
console.timeEnd('Array.from + forEach');

Рекомендации

Для максимальной совместимости: используй обычный for цикл.

Для современного кода: используй for...of цикл - он читаемый и работает везде.

Для функционального стиля: преобразуй в массив через Array.from() и используй методы массива.

Для производительности: используй обычный for цикл, он работает быстрее всего.

Заключение

NodeList можно итерировать множеством способов. В современных браузерах лучше использовать for...of или преобразовать в массив через Array.from(). Для старых браузеров работает обычный for цикл. Выбор способа зависит от требований проекта к совместимости и стилю кода.