JavaScript Academy · Урок

NodeList и HTMLCollection

Разберитесь в различиях между коллекциями элементов.

«NodeList и HTMLCollection» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Два типа коллекций

Методы DOM возвращают один из двух объектов, похожих на списки: NodeList или HTMLCollection. Они выглядят похоже, но заметно различаются.

Откуда берётся NodeList

querySelectorAll и childNodes возвращают объекты NodeList. Объект от querySelectorAll является статическим: это снимок, созданный во время запроса.

const items = document.querySelectorAll(".item"); // static NodeList

Откуда берутся коллекции HTML-элементов

getElementsByClassName, getElementsByTagName и свойство children возвращают динамические объекты HTMLCollection.

const items = document.getElementsByClassName("item"); // live HTMLCollection

Статические и динамические коллекции

Статический NodeList сохраняет исходное содержимое, даже если DOM изменился. Динамическая коллекция HTML-элементов автоматически отражает добавления и удаления.

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

Поддержка forEach

У NodeList есть встроенный forEach. У HTMLCollection его нет, поэтому её нужно преобразовать или использовать цикл с индексом.

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

Ни одна не является настоящим массивом

Обе коллекции похожи на массивы: у них есть length и доступ по индексу, но нет методов map, filter и reduce.

const list = document.querySelectorAll(".item");
// list.map is undefined

Преобразование с помощью Array.from

Array.from превращает любую из этих коллекций в настоящий массив, открывая доступ ко всем методам массивов.

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

Преобразование с помощью оператора распространения

Оператор распространения — это краткая альтернатива, которая также создаёт настоящий массив.

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

Ловушка перебора динамического списка

Удаление элементов во время перебора динамической коллекции HTML-элементов сдвигает индексы и приводит к пропуску элементов. Сначала преобразуйте коллекцию в массив, чтобы безопасно её перебрать.

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

Индексация обеих коллекций

Обе коллекции поддерживают числовую индексацию и length, поэтому базовый доступ выглядит одинаково, хотя внутреннее поведение различается.

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

Выбор подходящего типа

Используйте querySelectorAll, когда нужен стабильный снимок и встроенный forEach. Выбирайте динамические коллекции, только если список должен оставаться синхронизированным с DOM.

Быстрая проверка

Найдите различие.

Итоги

NodeList, возвращаемый querySelectorAll, является статическим и поддерживает forEach; коллекция HTML-элементов, возвращаемая getElementsByClassName, getElementsByTagName и children, является динамической и не поддерживает forEach. Ни одна из них не является настоящим массивом: перед использованием map, filter и reduce, а также перед безопасным перебором с изменением коллекции преобразуйте её с помощью Array.from или оператора распространения.

Часто задаваемые вопросы

Урок «NodeList и HTMLCollection» бесплатный?

Да — полный текст урока «NodeList и HTMLCollection» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «NodeList и HTMLCollection»?

Разберитесь в различиях между коллекциями элементов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «NodeList и HTMLCollection»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy