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

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

Прикладів ще не додано