Цикл по элементам 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...of | 🚴♂️💨 |
Array.prototype.forEach | 🏃♂️💨 |
Классические циклы 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;
}, {});
Поиск баланса
Выбирая метода итерации, ищите оптимальный компромисс между производительностью, читаемостью кода и функциональностью, не забывая о стиле написания кода и архитектуре проекта.