HTMLCollection
HTMLCollection — это коллекция (список) HTML-элементов в виде массива.
Элементы в коллекции доступны по индексу (начинается с 0).
Свойство length возвращает количество элементов в коллекции.
HTMLCollection или NodeList
HTMLCollection — это почти то же самое, что и NodeList.
См. описание ниже.
КТО возвращает HTMLCollection?
Свойства и методы HTMLCollection
В HTMLCollection можно использовать следующие свойства и методы:
| Имя | Описание |
|---|---|
| length | Возвращает количество элементов в HTMLCollection |
| item() | Возвращает элемент по указанному индексу |
| namedItem() | Возвращает элемент с указанным идентификатором |
Примеры HTMLCollection
Количество элементов <p> в документе составляет:
const elements = document.getElementsByTagName("p");
let numb = elements.length;
Попробуйте сами »
Перебираем элементы в HTMLCollection:
const elements = document.getElementsByTagName("*");
for (let i = 0; i < elements.length; i++) {
.. какой-то код ..
}
Попробуйте сами »
Не массив
HTMLCollection — это не массив!
HTMLCollection может выглядеть как массив, но это не так.
Вы можете перебрать HTMLCollection и ссылаться на его элементы с помощью индекса.
Но вы не можете использовать методы массива, такие как push(), pop() или join(), в HTMLCollection.
Разница HTMLCollection и NodeList
NodeList и HTMLcollection — это практически одно и то же.
Оба — это массивоподобные коллекции (списки) узлов (элементов), извлеченных из документа. Доступ к узлам можно получить по индексным номерам. Индекс начинается с 0.
Оба имеют свойство length, которое возвращает количество элементов в списке (коллекции).
HTMLCollection — это коллекция элементов документа.
NodeList — это коллекция узлов документа (узлы элементов, узлы атрибутов и текстовые узлы).
Доступ к элементам HTMLCollection осуществляется по их имени, идентификатору или индексному номеру.
Доступ к элементам NodeList осуществляется только по их индексному номеру.
HTMLCollection всегда является живой коллекцией. Пример: если вы добавите элемент <li> в список в DOM, список в HTMLCollection также изменится.
NodeList чаще всего является статической коллекцией. Пример: если вы добавите элемент <li> в список в DOM, список в NodeList не изменится.
Методы getElementsByClassName() и getElementsByTagName() возвращают активную HTMLCollection.
Метод querySelectorAll() возвращает статический NodeList.
Свойство childNodes возвращает активный NodeList.