JS об'єкт Collection
Загальний опис
HTMLCollection - це об'єкт, що представляє впорядковану колекцію вузлів, які відповідають набору вузлів HTML-елементів. Цей об'єкт зазвичай повертається методами, які можуть знайти кілька елементів на веб-сторінці, такими як document.getElementsByTagName(), document.getElementsByClassName() або element.children.
HTMLCollection є колекцією лише для читання, тобто її елементи не можна видалити або додати безпосередньо. Однак, оскільки це "живий" об'єкт, він автоматично оновлюється, якщо структура вихідного документа змінюється. Елементи в HTMLCollection можна отримати за індексом, як у звичайному масиві, або за допомогою методу item().
Наприклад, щоб отримати всі елементи <p> на сторінці та вивести їхній текстовий вміст, можна використати:
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].textContent);
}
Або, використовуючи метод item():
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs.item(i).textContent);
}
Хоча HTMLCollection схожий на масив, він не є екземпляром Array і не має деяких методів масивів, таких як map, filter або reduce. Однак, його можна легко перетворити на справжній масив за допомогою Array.from() або розповсюдження (...):
const paragraphs = document.getElementsByTagName('p');
const paragraphsArray = Array.from(paragraphs);
// або
const paragraphsArray = [...paragraphs];
Після цього можна використовувати стандартні методи масивів для маніпулювання колекцією елементів.
Загалом, об'єкт HTMLCollection забезпечує зручний спосіб отримання та роботи з множинними елементами на веб-сторінці, що є важливим для створення динамічних та інтерактивних веб-додатків.
Синтаксис
Синтаксис ще не доданоПереглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Прикладів ще не додано
Методи
item()- Метод повертає елемент з колекції за індексом.
namedItem()- Повертає елемент з колекції за іменем.
Властивості
length- Вказує кількість елементів у колекції.