JS об'єкт HTMLCollection

HTMLCollection в JavaScript

HTMLCollection - це об'єкт у JavaScript, який представляє колекцію елементів DOM, доступних за індексом або ім'ям. Типово ви зіткнетеся з HTMLCollection при використанні таких методів DOM, як document.getElementsByTagName або element.children.

Приклад:

let divs = document.getElementsByTagName("div");
console.log(divs instanceof HTMLCollection);  // виведе true

У цьому прикладі ми отримали всі елементи div з документа у вигляді HTMLCollection.

Доступ до елементів

Ви можете отримати доступ до елементів колекції за допомогою індекса, так само як і у масивів.

let firstDiv = divs[0];  // отримуємо перший елемент div з колекції

Перебір елементів

Незважаючи на те, що HTMLCollection не є масивом, ви можете використовувати цикл for для перебору його елементів:

for (let i = 0; i < divs.length; i++) {
    console.log(divs[i]);  // виводить кожен елемент div
}

Властивість length

HTMLCollection має властивість length, яка повертає кількість елементів у колекції:

let totalDivs = divs.length;  // отримуємо кількість елементів div на сторінці
console.log(totalDivs);

Метод namedItem

Цей метод дозволяє отримати елемент з HTMLCollection за ім'ям його атрибуту name або id.

let element = divs.namedItem("someId");
console.log(element);  // виводить елемент з id "someId" або null, якщо такого елемента немає

Живі колекції

HTMLCollection - це так звана "жива" колекція, що означає, що вона автоматично оновлюється при зміні DOM. Якщо ви видаляєте або додаєте елементи на сторінку, колекція буде автоматично відображати ці зміни.

let divs = document.getElementsByTagName("div");
console.log(divs.length);  // припустимо, що виведе 5

// додаємо новий div на сторінку
let newDiv = document.createElement("div");
document.body.appendChild(newDiv);

console.log(divs.length);  // виведе 6, оскільки колекція автоматично оновлена

Нотатка:	`HTMLCollection` дозволяє отримувати елементи не тільки за індексом, але й за ім'ям за допомогою методу `namedItem`. Але пам'ятайте, що це працює лише для елементів, які мають атрибут `name` або `id`.
Порада:	Хоча `HTMLCollection` схожий на масив, він не має багатьох корисних методів масивів, таких як `forEach`, `map` тощо. Якщо вам потрібно використовувати ці методи, рекомендується перетворити `HTMLCollection` на справжній масив за допомогою `Array.from()`.
Порада:	Намагайтеся не модифікувати DOM під час ітерації через `HTMLCollection`. Через те, що це жива колекція, зміни в DOM можуть вплинути на вашу ітерацію та призвести до непередбачуваних результатів. Замість цього зберігайте потрібні зміни та застосовуйте їх після завершення ітерації.
Нотатка:	Ви можете легко перетворити `HTMLCollection` на масив для використання всіх доступних методів масивів: `let divArray = Array.from(divs); divArray.forEach(div => console.log(div)); // використовуємо метод forEach для масивів`
Нотатка:	`HTMLCollection` не дозволяє прямо модифікувати свої елементи, наприклад, ви не можете додати або видалити елемент з колекції. Замість цього, ви маєте модифікувати справжній DOM.

Синтаксис

let elements = document.getElementsByTagName(tagName);

Переглядачі

Переглядач
	1	1	1	8	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

Якщо вам потрібно швидко змінити стиль для всіх елементів певного типу, наприклад, для всіх параграфів, ви можете використовувати HTMLCollection.

В цьому прикладі ми змінили колір тексту всіх параграфів на синій.

let paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = 'blue';
}

Якщо на вашій сторінці є багато елементів із певним класом, які вам потрібно видалити, ви також можете використовувати HTMLCollection.

Тут ми видаляємо всі елементи з класом "unwanted". Ми використовуємо цикл while, оскільки HTMLCollection є "живою" колекцією, і її розмір зменшується після кожного видалення.

let unwantedElements = document.getElementsByClassName('unwanted');
while(unwantedElements[0]) {
    unwantedElements[0].parentNode.removeChild(unwantedElements[0]);
}

HTMLCollection може бути корисним, коли вам потрібно працювати із формами та їх елементами.

Цей приклад проходить через всі елементи форми і виводить їх імена та значення.

let form = document.forms['myForm'];
let formElements = form.elements;

for (let i = 0; i < formElements.length; i++) {
    console.log(formElements[i].name + ': ' + formElements[i].value);
}

JS довідник

JavaScript

Наповнення JS розділу

JS об'єкт HTMLCollection

HTMLCollection в JavaScript

Синтаксис

Переглядачі

Приклади

Методи

Властивості