HTMLCollection против NodeList в JavaScript: проясняем различия

При работе с JavaScript и объектной моделью документа (DOM) вы можете столкнуться с двумя похожими, но разными понятиями: HTMLCollection и NodeList. Оба представляют коллекции элементов в документе, но имеют некоторые ключевые различия. В этой статье мы углубимся в нюансы HTMLCollection и NodeList, изучим их характеристики и предоставим примеры кода, иллюстрирующие их использование.

Понимание HTMLCollection.
HTMLCollection — это живая упорядоченная коллекция элементов, доступ к которым осуществляется по их индексу или по атрибутам имени или идентификатора. В основном он используется для представления коллекций элементов, имеющих общее имя тега, например, все элементы <div>в документе. HTMLCollections автоматически обновляются при изменении базового документа, отражая любые добавления или удаления элементов, соответствующих указанным критериям.

Для доступа к элементам в HTMLCollection вы можете использовать такие методы, как getElementsByClassName(), getElementsByTagName()или querySelectorAll(). Вот пример:

const divElements = document.getElementsByTagName('div');
console.log(divElements.length); // Outputs the number of <div> elements in the document

Что такое NodeList:
Подобно HTMLCollection, NodeList также представляет собой упорядоченную коллекцию элементов. Однако есть некоторые заметные различия. NodeList обычно возвращается такими методами, как querySelectorAll()или childNodes, и представляет собой статический список элементов, соответствующих указанным критериям на момент запроса. В отличие от HTMLCollection, NodeList не обновляется автоматически при изменении документа, превращая его в одноразовый снимок элементов.

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

const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // Outputs the number of <p> elements in the document
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].textContent); // Outputs the text content of each <p> element
}

Методы и свойства.
И HTMLCollection, и NodeList имеют некоторые общие методы и свойства. Давайте рассмотрим некоторые из них:

  1. length: возвращает количество элементов в коллекции.
  2. item(index): возвращает элемент по указанному индексу в коллекции.
  3. forEach(callback): вызывает предоставленную функцию обратного вызова для каждого элемента коллекции.
  4. entries(): возвращает объект-итератор, содержащий пары ключ/значение для каждого элемента коллекции.

Вот пример, демонстрирующий некоторые из этих методов:

const images = document.images;
console.log(images.length); // Outputs the number of <img> elements in the document
images.forEach((image, index) => {
  console.log(`Image ${index + 1}: ${image.src}`);
});
const firstImage = images.item(0);
console.log(firstImage.alt); // Outputs the alt attribute of the first <img> element

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