Как работать с типами объектов HTMLCollection и NodeList в JavaScript
HTMLCollection и NodeList - это два типа объектов, которые представляют коллекции элементов на веб-странице. Оба типа объектов представляют коллекции элементов DOM, но есть некоторые различия между ними. Давайте рассмотрим каждый тип объекта подробнее и рассмотрим примеры их использования.
HTMLCollection в JavaScript
HTMLCollection - это объект, представляющий коллекцию элементов DOM, которые были найдены с помощью методов, таких как getElementsByTagName
, getElementsByClassName
и getElementsByName
. Каждый элемент в HTMLCollection имеет свой индекс, начиная с 0.
Свойства HTMLCollection
length
- количество элементов в коллекции
Методы HTMLCollection
item()
- возвращает элемент коллекции по индексуnamedItem()
- возвращает элемент коллекции по имени (для коллекции, полученной с помощьюgetElementsByName
)
Пример использования HTMLCollection:
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
const container = document.querySelector('.container');
const paragraphs = container.getElementsByTagName('p');
console.log(paragraphs.length); // 3
console.log(paragraphs.item(0)); // <p>Paragraph 1</p>
console.log(paragraphs.item(1)); // <p>Paragraph 2</p>
console.log(paragraphs.item(2)); // <p>Paragraph 3</p>
NodeList в JavaScript
NodeList - это объект, представляющий коллекцию элементов DOM, которые были найдены с помощью методов, таких как querySelectorAll
или childNodes
. Каждый элемент в NodeList также имеет свой индекс, начиная с 0.
Свойства NodeList
length
- количество элементов в коллекции
Методы NodeList
item()
- возвращает элемент коллекции по индексу
Пример использования NodeList
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const listItems = document.querySelectorAll('#list li');
console.log(listItems.length); // 3
console.log(listItems.item(0)); // <li>Item 1</li>
console.log(listItems.item(1)); // <li>Item 2</li>
console.log(listItems.item(2)); // <li>Item 3</li>
Оба типа объектов ведут себя очень похоже и предоставляют простой способ взаимодействия с коллекциями элементов на странице.
Заключение
HTMLCollection и NodeList - это коллекции элементов DOM, которые предоставляют удобный способ доступа к элементам на странице. Они имеют свои методы и свойства для работы с элементами. При необходимости можно использовать методы для преобразования коллекций в массивы и перебор элементов с помощью циклов.