Обход элементов с document.querySelectorAll: ликвидация лишних

Быстрый ответ

Чтобы выполнить итерацию элементов, полученных посредством document.querySelectorAll(), рекомендуется применять метод forEach():

document.querySelectorAll('селектор').forEach(el => {
    // Таким образом, можно взаимодействовать с элементом.
});

На месте 'селектор' укажите необходимый вам CSS-селектор, чтобы запустить выполнение цикла.

Основы итерации с преобразованием в массив

NodeList возможно трансформировать в массив с помощью оператора распространения:

[...document.querySelectorAll('селектор')].forEach(el => {
    // И теперь в вашем распоряжении все методы массива!
});

Такой подход позволяет использовать методы массивов, включая map, filter и reduce.

Цикл for: Классический способ итерации по NodeList

Цикл for умеет перебирать NodeList без его трансформации:

const nodes = document.querySelectorAll('селектор');
for (let i = 0; i < nodes.length; i++) {
    // Объект nodes[i] — это наше рабочее поле!
}

Этот подход предоставляет полный контроль над перебором, позволяя при необходимости применять условия, остановки или пропуски в рамках цикла.

Стажем старые браузеры? У нас есть план «Б»!

Если в ранних версиях браузеров отсутствует поддержка метода forEach для NodeList, придёт на помощь полифилл или такой вариант:

Array.prototype.forEach.call(document.querySelectorAll('селектор'), function(el){
    // Теперь элемент может воспользоваться 'forEach'!
});

Этот метод применяет forEach из прототипа массива непосредственно к NodeList.

Совместимость с различными браузерами: Не стоит забывать о добром старом ES5!

Повышенную совместимость с разными браузерами можно гарантировать, транспилируя современный JavaScript в ES5 с помощью таких инструментов, как Babel.js.

Визуализация

Отладка JS похожа на детективную игру в криминальном фильме, где вы одновременно являетесь и злодеем 🔪:

До: [🃏1, 🃏2, 🃏3, 🃏4]
После:  [🔁1, 🔁2, 🔁3, 🔁4]

'Перевёрнутые' карты символизируют DOM элементы, которые обновляются в ходе итерации.

Верификация элементов: Сначала осмотрите, а потом делайте выводы!

Перед началом перебора убедитесь, что NodeList содержит ожидаемые элементы:

const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
if (allCheckboxes.length === 0) {
    console.error('Внимание! Флажки не обнаружены! Нужно проверить ваши ожидания!');
}

Применяя такое предохранительное мероприятие, вы предотвратите обработку ошибочных или пустых выборок.

Ловушка с ложными значениями: Доверяем только достоверным данным!

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

for (let checkbox of allCheckboxes) {
    if (checkbox) {
        // Галочка прошла проверку! Продолжаем работу.
    }
}

Защита от undefined или null элементов в NodeList, возможно, съэкономит вам значительное время на отладку кода.

Среда браузера: Когда это приобретает значение!

При разработке своих методов учитывайте совместимость со всеми целевыми браузерами. Проверяйте поддержку методов для NodeList перед их использованием:

- `.forEach` — отсутствует в браузере Internet Explorer.
- Оператор распространения — это функциональность, входящая в стандарт ES6, и она не поддерживается всеми браузерами.

Когда браузер забыл про старость!

Изредка приходится пользоваться полифиллом для NodeList.prototype.forEach в устаревших браузерах. В таких случаях подключение соответствующих скриптов или использование сервиса Polyfill.io станет хорошим решением.

Полезные материалы

1. Все о Document.querySelectorAll() | MDN — Детали метода querySelectorAll в документации MDN.
2. NodeList и метод forEach() | MDN – Использование forEach для итерации по NodeList.
3. Как разгромить драконов циклами querySelectorAll | CSS-Tricks — Советы по работе с querySelectorAll при помощи циклов.
4. Секретные знания по поиску элементов в DOM | Javascript.info — Откройте для себя мир секретов DOM и querySelectorAll.
5. Искусство преобразования NodeList в массив — Узнайте, как преобразовать NodeList в массив и создать своё capolavoro.