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 схожий на масив, він не має багатьох корисних методів масивів, таких як forEach, map тощо. Якщо вам потрібно використовувати ці методи, рекомендується перетворити HTMLCollection на справжній масив за допомогою Array.from().

автор: Bond правити

Порада

Намагайтеся не модифікувати DOM під час ітерації через HTMLCollection. Через те, що це жива колекція, зміни в DOM можуть вплинути на вашу ітерацію та призвести до непередбачуваних результатів. Замість цього зберігайте потрібні зміни та застосовуйте їх після завершення ітерації.

автор: Bond правити

Нотатка

HTMLCollection дозволяє отримувати елементи не тільки за індексом, але й за ім'ям за допомогою методу namedItem. Але пам'ятайте, що це працює лише для елементів, які мають атрибут name або id.

автор: Bond правити

Нотатка

HTMLCollection не дозволяє прямо модифікувати свої елементи, наприклад, ви не можете додати або видалити елемент з колекції. Замість цього, ви маєте модифікувати справжній DOM.

автор: Bond правити

Нотатка

Ви можете легко перетворити HTMLCollection на масив для використання всіх доступних методів масивів:

let divArray = Array.from(divs);
divArray.forEach(div => console.log(div));  // використовуємо метод forEach для масивів

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let elements = document.getElementsByTagName(tagName);

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

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

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

Підтримка: мобільні переглядачі

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

Приклади

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

<p>перший абзац</p>
<p>другий абзац</p>

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

<div class="unwanted">перший елемент</div>
<div class="unwanted">другий елемент</div>

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

<form name="myForm">
    <input type="text" name="login" value="лесь">
    <input type="password" name="pass" value="таємниця">
</form>

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