css.in.ua
Підтримати

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);
}

Методи

Властивості

Спільнота

Зв'язок