Дмитрий Фандорин
HTMLCollection и NodeList в JavaScript
HTMLCollection и NodeList - это коллекции элементов DOM-дерева, которые могут быть использованы для обращения к элементам веб-страницы. Обе коллекции похожи между собой, но отличаются в том, как они создаются и какие методы и свойства они предоставляют.
Описание работы
HTMLCollection включает в себя все элементы, которые были включены в исходный HTML-код на странице, и создается автоматически при загрузке страницы. Для доступа к элементам этой коллекции можно использовать индекс или имя элемента. HTMLCollection также содержит методы, такие как namedItem()
, который позволяет получить элемент по его имени или идентификатору.
Пример использования HTMLCollection:
const divs = document.getElementsByTagName('div');
console.log(divs.length); // выводит количество элементов "div" на странице
NodeList, с другой стороны, создается динамически и может содержать элементы, которые были созданы в JavaScript-коде или добавлены на страницу динамически. Для доступа к элементам этой коллекции также можно использовать индекс или итерацию. NodeList не содержит метода namedItem()
, но включает в себя метод forEach()
, который позволяет перебрать каждый элемент коллекции.
Пример использования NodeList:
const items = document.querySelectorAll('ul li');
items.forEach(function(item) {
console.log(item.textContent);
});
Несмотря на то, что обе коллекции похожи и имеют много общих методов и свойств, они не являются полностью взаимозаменяемыми. В зависимости от задачи и требований к производительности, может быть более подходящим использование одной из коллекций.
Заключение
HTMLCollection и NodeList представляют собой коллекции элементов DOM-дерева, которые могут быть использованы для доступа к элементам на веб-странице. Обе коллекции имеют много общих методов и свойств, но отличаются в том, как они создаются и какие методы и свойства они предоставляют. Одна коллекция может быть более подходящей для определенных задач, в зависимости от требований к производительности и специфики использования.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile