HTMLCollection
Обновлено: 09.03.2023
HTMLCollection
HTMLCollection — це колекція (список) елементів HTML у вигляді масиву.
До елементів колекції можна отримати доступ за індексом (починається з 0).
Властивість length повертає кількість елементів у колекції.
HTMLCollection проти NodeList
HTMLCollection майже те саме, що NodeList .
Дивіться опис нижче.
Властивості та методи
Для HTMLCollection можна використовувати такі властивості та методи:
| Name | Description |
| length | Returns the number of elements in an HTMLCollection |
| item() | Returns the element at a specified index |
| namedItem() | Returns the element with a specified id |
Не масив
HTMLCollection не є масивом!
HTMLCollection може виглядати як масив, але це не так.
Ви можете прокрутити HTMLCollection і посилатися на його елементи за допомогою індексу.
Але ви не можете використовувати такі методи Array, як push(), pop() або join() у HTMLCollection.
Різниця між HTMLCollection і NodeList
NodeList і HTMLcollection – це майже те саме.
Обидва є масивоподібними колекціями (списками) вузлів (елементів), витягнутих із документа. До вузлів можна отримати доступ за номерами індексів. Індекс починається з 0.
Обидва мають властивість length , яка повертає кількість елементів у списку (колекції).
HTMLCollection — це набір елементів документа .
NodeList — це набір вузлів документа (вузли елементів, вузли атрибутів і текстові вузли).
Доступ до елементів HTMLCollection можна отримати за їх назвою, ідентифікатором або номером індексу.
До елементів NodeList можна отримати доступ лише за їх індексним номером.
HTMLCollection завжди є живою колекцією. Приклад: якщо ви додасте елемент <li> до списку в DOM, список у HTMLCollection також зміниться.
NodeList найчастіше є статичною колекцією. Приклад: якщо ви додасте елемент <li> до списку в DOM, список у NodeList не зміниться.
Методи getElementsByClassName()and getElementsByTagName() повертають живу HTMLCollection.
Метод querySelectorAll()повертає статичний NodeList.
Властивість childNodesповертає живий NodeList.