JS метод Element.getElementsByTagName()

Загальний опис

Метод Element.getElementsByTagName() повертає псевдо-масив елементів, що знаходяться всередині елементу, на якому викликається метод, і відповідають заданому імені тегу. Цей метод дозволяє вибрати всі елементи певного типу в межах вказаного вузла, що робить його корисним для маніпулювання та доступу до конкретних елементів веб-сторінки.

Метод getElementsByTagName() можна викликати на будь-якому елементі документа, включно з об'єктом document, який представляє весь HTML-документ. Синтаксис виклику методу виглядає так: elementNode.getElementsByTagName(tagName), де elementNode - елемент, в межах якого здійснюється пошук, а tagName - рядок, що містить ім'я тегу для пошуку (наприклад, "p" для пошуку всіх елементів <p>).

Розглянемо простий приклад використання getElementsByTagName() на об'єкті document:

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Виведе кількість елементів <p> на сторінці

В цьому випадку paragraphs буде псевдо-масивом, що містить всі елементи <p> на сторінці. Ви можете перебирати цей псевдо-масив за допомогою циклу або використовувати методи масиву, такі як forEach().

Метод getElementsByTagName() також можна застосовувати до окремих елементів, щоб знайти вкладені елементи певного типу. Наприклад:

<div id="content">
  <p>Перший параграф</p>
  <section>
    <p>Другий параграф</p>
  </section>
  <p>Третій параграф</p>
</div>

const contentDiv = document.getElementById("content");
const paragraphsInContent = contentDiv.getElementsByTagName("p");
console.log(paragraphsInContent.length); // Виведе 3

У цьому прикладі paragraphsInContent буде псевдо-масивом, що містить усі три елементи <p> всередині елементу <div> з ідентифікатором "content".

Варто зазначити, що метод getElementsByTagName() повертає "живу" колекцію, що автоматично оновлюється при змінах в структурі документа. Це означає, що якщо ви додасте або видалите елемент відповідного типу після виклику getElementsByTagName(), колекція автоматично відобразить ці зміни.

Для більш гнучкого вибору елементів часто використовують метод querySelectorAll(), який дозволяє вибирати елементи за допомогою складніших селекторів CSS. Однак, getElementsByTagName() залишається корисним інструментом для простого та ефективного вибору елементів за їх тегом.

Синтаксис

getElementsByTagName(tagName)

Параметри

Return

HTMLCollection

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримуємо колекцію всіх елементів <p>
const paragraphs = document.getElementsByTagName('p');

// Змінюємо колір тексту для всіх елементів <p>
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.color = 'red';
}

// Отримуємо елемент <ul>
const myList = document.getElementById('my-list');

// Отримуємо колекцію елементів <li> всередині елемента <ul>
const listItems = myList.getElementsByTagName('li');

// Перевіряємо, чи елемент є елементом <li>
for (let i = 0; i < listItems.length; i++) {
  if (listItems[i].tagName.toLowerCase() === 'li') {
    // Додаємо клас до елемента <li>
    listItems[i].classList.add('highlighted');
  }
}