HTMLCollection и NodeList — это оба похожих на массив DOM-объекта, но они отличаются в трёх ключевых аспектах: изменяемость, состав типов узлов и доступные методы.
HTMLCollection всегда живой — автоматически обновляется при изменении DOMNodeList может быть либо живым, либо статичным в зависимости от того, как его создали:
element.childNodes возвращает живой NodeListdocument.querySelectorAll() возвращает статичный NodeList (снимок)HTMLCollection содержит только узлы-элементы (например, <div>, <p>)NodeList может содержать узлы любого типа, включая:
NodeList (из querySelectorAll) поддерживает forEach() напрямую:
document.querySelectorAll('p').forEach(node => console.log(node));
HTMLCollection не поддерживает forEach() нативноArray.from(), чтобы преобразовать любую из них и получить полную поддержку методов массива:
Array.from(htmlCollection).map(...);
Предпочитай querySelectorAll() в большинстве случаев — она возвращает статичный NodeList с поддержкой forEach(), что делает её более предсказуемой и удобной, чем HTMLCollection.
Оба HTMLCollection и NodeList всегда являются живыми коллекциями, которые автоматически отражают изменения в DOM.
Новый — ещё не проверен сообществом
Вы