JS метод Document.getElementsByTagName()

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

Метод getElementsByTagName() приймає як аргумент назву тега і повертає живу колекцію елементів, які відповідають цьому тегу у порядку, в якому вони з'являються у документі. Жива колекція означає, що вона автоматично оновлюється при додаванні або видаленні елементів, що відповідають заданому тегу. Це робить getElementsByTagName() надзвичайно потужним інструментом для роботи з HTML-документами, дозволяючи розробникам легко вибирати групи елементів для подальшої обробки або маніпулювання.

Метод getElementsByTagName() має широке застосування у веб-розробці, зокрема при стилізації, динамічному зміні вмісту або при аналізі структури документа. Він може бути використаний для знаходження усіх елементів певного типу, наприклад, усіх <div>, <p> або <a>, що дозволяє розробникам швидко застосовувати стилі, змінювати атрибути або виконувати інші дії над цими елементами.

Розглянемо базовий приклад, де метод getElementsByTagName() використовується для отримання усіх елементів <p> на сторінці та застосування до них певного стилю:

// Отримання усіх параграфів у документі
var paragraphs = document.getElementsByTagName('p');

// Застосування стилю до кожного параграфа
for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = 'blue';
}

У цьому прикладі метод getElementsByTagName() повертає всі елементи <p>, після чого за допомогою циклу кожному параграфу присвоюється колір тексту блакитного кольору.

Розширене застосування

Метод getElementsByTagName() може бути також використаний у складніших сценаріях, наприклад, для динамічного створення списку посилань на основі елементів <a>, які містяться в певному секції документа:

// Отримання усіх посилань у секції з ідентифікатором 'content'
var links = document.getElementById('content').getElementsByTagName('a');

// Створення списку посилань
var list = document.createElement('ul');

for (var i = 0; i < links.length; i++) {
    var item = document.createElement('li');
    var link = document.createElement('a');


    link.href = links[i].href;
    link.textContent = links[i].textContent;
    item.appendChild(link);
    list.appendChild(item);
}

// Додавання списку до документа
document.body.appendChild(list);

У цьому прикладі спочатку отримуються усі елементи <a> в межах елемента з ідентифікатором content. Потім створюється ненумерований список, кожен елемент якого містить посилання з відповідним href та текстом. Такий підхід демонструє, як getElementsByTagName() може сприяти генерації динамічного контенту, базуючись на існуючій структурі HTML-документа.

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

Синтаксис

getElementsByTagName(name)

Параметри

*name

Рядок, що вказує ім'я тегів елементів для пошуку. Спеціальний рядок * представляє всі елементи.

Return

HTMLCollection

Повертає живу колекцію HTMLCollection знайдених елементів у порядку, в якому вони з'являються в дереві документа. Ця колекція автоматично оновлюється при додаванні або видаленні елементів, що відповідають заданому критерію пошуку. Варто зазначити, що, хоча за останньою специфікацією W3C результатом є HTMLCollection, у деяких браузерах на базі WebKit, таких як Safari, може повертатися NodeList.

Переглядачі

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

Приклади

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

// Зміна кольору тексту та фону для всіх параграфів
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.color = "blue";
  paragraphs[i].style.backgroundColor = "yellow";
}

// Додавання події "click" до всіх кнопок на сторінці
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    alert("Кнопка була натиснута");
  });
}