Какие ключевые различия между NodeList и HTMLCollection в плане их изменяемости, состава типов узлов и доступных методов?

Обзор

HTMLCollection и NodeList — это оба похожих на массив DOM-объекта, но они отличаются в трёх ключевых аспектах: изменяемость, состав типов узлов и доступные методы.

Изменяемость

• HTMLCollection всегда живой — автоматически обновляется при изменении DOM
• NodeList может быть либо живым, либо статичным в зависимости от того, как его создали:
  • element.childNodes возвращает живой NodeList
  • document.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.