Цикл по элементам HTMLCollection: получение id элемента

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

Для обхода по HTMLCollection используйте цикл for или преобразуйте его в массив с помощью функции Array.from() и примените метод forEach:

Цикл for:

for (let elem of document.getElementsByClassName('example')) {
  console.log(elem);
}

Array.from() + forEach:

Array.from(document.getElementsByClassName('example')).forEach(console.log);

Основные факты

Итерация по HTMLCollections часто встречается при работе с DOM. Вот несколько проверенных на практике способов пройти по этим объектам.

Использование цикла for...of

Цикл for...of поддерживается современными браузерами и является эффективным средством для работы с HTMLCollections:

let elements = document.getElementsByClassName('example');
for (let element of elements) {
    console.log(element.id);
}

Подробнее об этом расскажет наш спикер на видео

Преобразование в массив для дополнительных возможностей

Преобразование HTMLCollection в массив открывает доступ ко множеству методов массивов:

let elementsArray = Array.from(document.getElementsByClassName('example'));
elementsArray.map(elem => elem.textContent);

Применение Array.prototype.forEach

До появления Array.from(), метод Array.prototype.forEach часто применяли для итерации HTMLCollections:

let collection = document.getElementsByClassName('example');
Array.prototype.forEach.call(collection, function(elem) {
  console.log(elem);
});

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

Осторожно с циклом for...in

Цикл for...in наилучшим образом подходит для перебора свойств объектов, а не индексов:

for (let key in collection) {
  if (collection.hasOwnProperty(key)) {
    console.log(collection[key]);
  }
}

Использование for...in с HTMLCollections может привести к непредвиденным результатам.

Внедрение Symbol.iterator

С помощью Symbol.iterator можно воспользоваться for...of для NodeLists. В современных браузерах аналогичная функциональность добавлена и для HTMLCollection:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

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

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

Изучая производительность различных методов итерации, можно привести их к следующему виду:

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

for (let i = 0; i < collection.length; i++) {
    console.log(collection[i]);
}

Цикл for...of отличается своей простотой и эффективностью:

for (let item of collection) {
    console.log(item);
}

Array.prototype.forEach является проверенным и надежным вариантом:

Array.from(collection).forEach(item => console.log(item));

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

За пределами основ

Использование оператора распространения для преобразования в массив

Оператор распространения (spread operator) позволяет перенести элементы коллекции в массив:

[...document.getElementsByClassName('example')].forEach(item => console.log(item));

Использование NodeList через querySelectorAll

NodeLists близко к HTMLCollections, но метод querySelectorAll делает их поддерживаемыми для forEach:

document.querySelectorAll('.example').forEach(elem => console.log(elem.id));

Обеспечение обратной совместимости

Очень важно обеспечивать совместимость с различными браузерами. В этом контексте традиционный цикл for всё ещё имеет большое значение:

let collection = document.getElementsByClassName('example');
for (let i = 0; i < collection.length; i++) {
    console.log(collection[i].id);
}

Заимствования из функционального программирования

Применяя функциональный подход, используйте такие методы, как map и reduce, для работы с HTMLCollections:

Array.prototype.reduce.call(collection, (accumulator, current) => {
    accumulator[current.id] = current;
    return accumulator;
}, {});

Поиск баланса

Выбирая метода итерации, ищите оптимальный компромисс между производительностью, читаемостью кода и функциональностью, не забывая о стиле написания кода и архитектуре проекта.

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

1. HTMLCollection – Веб-API | MDN
2. Объект HTMLCollection в DOM
3. javascript – Цикл for для элементов HTMLCollection – Stack Overflow
4. Как получить доступ к элементам в DOM | DigitalOcean
5. javascript – Самый эффективный способ преобразования HTMLCollection в массив – Stack Overflow