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() залишається корисним інструментом для простого та ефективного вибору елементів за їх тегом.

правити

Порада

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

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

Порада

Пам'ятайте, що getElementsByTagName() повертає "живу" колекцію елементів, яка автоматично оновлюється при змінах у структурі документа. Це може бути перевагою, якщо ви очікуєте, що елементи будуть додаватися або видалятися динамічно. Однак, якщо ви не хочете, щоб колекція змінювалася, розгляньте можливість перетворення її на масив за допомогою Array.from() або поширення (...).

const paragraphs = document.getElementsByTagName("p");
const paragraphsArray = Array.from(paragraphs);

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

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

Синтаксис

getElementsByTagName(tagName)

Повернення

HTMLCollection

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

<ul id="my-list">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<ul>
    <li>перший</li>
    <li>другий</li>
</ul>

// Отримуємо елемент <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');
  }
}