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() для ефективного доступу до всіх елементів заданого типу в межах документа. Це особливо корисно, коли потрібно маніпулювати або аналізувати групу елементів, таких як всі абзаци (p) або всі списки (ul, ol). Наприклад, для зміни стилю всіх абзаців можна використати цикл, щоб перебрати отриману колекцію.

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

Порада

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

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

Порада

Для оптимізації продуктивності скрипта, особливо на великих документах, спробуйте мінімізувати кількість викликів getElementsByTagName(). Часте використання цього методу може сповільнити виконання скрипта, оскільки кожен виклик переглядає весь документ або його значну частину.

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

Порада

Якщо вам потрібно отримати доступ лише до першого елементу заданого типу, розгляньте альтернативний метод querySelector(), який дозволяє отримати перший елемент, що відповідає заданому селектору. Це може підвищити ефективність скрипта, особливо коли знайдений елемент єдиний або коли важливий лише перший з них.

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

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

Синтаксис

getElementsByTagName(name)

Параметри

name

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

автор: Bond

правити

Повернення

HTMLCollection

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	5.1	12	5

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

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

Приклади

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

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

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

<button>Натисни</button>

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

<header>
  <h2 class="title">getElementsByTagName()</h2>
  <p class="description">Повертає колекцію усіх елементів у документі з вказаним іменем тега.</p>
</header>
<main>
  <div class="result">
    <div>Перший блок</div>
    <div>Другий блок</div>
    <div>Третій блок</div>
    <button onclick="changeBackgroundColor('red')">Зробити фон червоним</button>
    <button onclick="changeBackgroundColor('blue')">Зробити фон синім</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result div {
  margin: 10px 0;
  padding: 10px;
  background-color: #eee;
}

function changeBackgroundColor(color) {
  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (divs[i].parentNode.classList.contains('result')) {// Змінюємо колір тільки для div в середині .result
      divs[i].style.backgroundColor = color;
    }
  }window.CP.exitedLoop(0);
}
//# sourceURL=pen.js