JS властивість Element.tagName

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

Властивість tagName є вбудованою властивістю об'єкта Element у JavaScript, яка повертає ім'я (назву) тегу для поточного елемента DOM як рядок у верхньому регістрі. Ця властивість дозволяє отримати інформацію про тип HTML-елемента, що може бути корисним для різноманітних маніпуляцій з DOM, валідації або обробки елементів на основі їх типу.

Властивість tagName можна використовувати з будь-яким HTML-елементом, отриманим за допомогою методів доступу до DOM, таких як document.getElementById(), document.getElementsByTagName(), document.querySelector() тощо. Наприклад, розглянемо наступний HTML-код:

<div id="myDiv">
  <p>Це параграф</p>
  <span>Це span</span>
</div>

Ми можемо отримати доступ до елементів та вивести їх tagName наступним чином:

const myDiv = document.getElementById('myDiv');
console.log(myDiv.tagName); // Виведе "DIV"

const paragraph = myDiv.firstElementChild;
console.log(paragraph.tagName); // Виведе "P"

const span = myDiv.lastElementChild;
console.log(span.tagName); // Виведе "SPAN"

Як бачимо, властивість tagName повертає назву тегу у форматі великих літер, незалежно від регістру, в якому був записаний тег в HTML-коді.

Властивість tagName часто використовується у поєднанні з умовними операторами або циклами для обробки елементів на основі їх типу. Наприклад, ми можемо застосувати певний стиль до всіх елементів <p> на сторінці:

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

Або ми можемо перевірити тип елемента перед виконанням певних дій:

function handleElement(element) {
  if (element.tagName === 'INPUT') {
    // Виконати дії, специфічні для input-елементів
  } else if (element.tagName === 'BUTTON') {
    // Виконати дії, специфічні для button-елементів
  }
  // ...
}

Властивість tagName є корисним інструментом для роботи з DOM та маніпуляцій з HTML-елементами на основі їх типу. Вона забезпечує зручний спосіб отримання інформації про тип елемента та дозволяє застосовувати відповідну логіку обробки залежно від цього типу.

Порада:

Пам'ятайте, що властивість tagName повертає назву тегу у форматі великих літер, незалежно від регістру, в якому був записаний тег в HTML-коді. Тому, якщо ви порівнюєте tagName з рядком, використовуйте верхній регістр для уникнення помилок.

Порада:

Використовуйте властивість tagName для валідації та перевірки коректності HTML-структури. Наприклад, ви можете перевірити, чи є певний елемент дочірнім елементом заданого типу батьківського елемента. Це може бути корисним для забезпечення відповідності структури DOM певним правилам або вимогам.

const parentElement = document.getElementById('parent');
const childElement = parentElement.firstElementChild;

if (childElement.tagName !== 'DIV') {
  console.error('Некоректна структура DOM');
}

Порада:

Властивість tagName часто використовується у поєднанні з методами document.getElementsByTagName() або document.querySelectorAll() для отримання колекції елементів за їх типом. Наприклад, щоб отримати всі елементи <p> на сторінці:

const paragraphs = document.getElementsByTagName('p');

Синтаксис

Element.tagName

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо поле введення тексту та кнопку "Додати елемент". При натисканні на кнопку, ми створюємо новий елемент DOM з випадковим тегом (div, span, p, h1, h2 або h3) та додаємо введений текст як текстовий вміст цього елемента. Створений елемент додається до контейнера #container.

При натисканні на створений елемент, ми використовуємо властивість tagName для виведення повідомлення з інформацією про тип елемента, на який було натиснуто.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abxVjoK">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість tagName для виведення типів елементів у вікно консолі. Це може бути корисним для відлагодження або розуміння структури DOM.

const div = document.querySelector('div');
console.log(div.tagName); // Виведе "DIV"

const span = document.querySelector('span');
console.log(span.tagName); // Виведе "SPAN"

const link = document.querySelector('a');
console.log(link.tagName); // Виведе "A"

У цьому прикладі ми використовуємо властивість tagName для застосування різних стилів до різних типів елементів. Ми створюємо функцію applyStyles, яка приймає елемент як аргумент і застосовує стилі залежно від типу елемента. Цей підхід може бути корисним для динамічного стилювання елементів на основі їх типу.

function applyStyles(element) {
  switch (element.tagName) {
    case 'H1':
    case 'H2':
    case 'H3':
      // Стилі для заголовків
      element.style.fontWeight = 'bold';
      element.style.textDecoration = 'underline';
      break;
    case 'P':
      // Стилі для параграфів
      element.style.lineHeight = '1.5';
      element.style.textAlign = 'justify';
      break;
    case 'A':
      // Стилі для посилань
      element.style.color = 'blue';
      element.style.textDecoration = 'none';
      break;
    // Додайте інші випадки для інших типів елементів
    default:
      // Стилі за замовчуванням
      element.style.color = 'black';
      element.style.fontSize = '16px';
  }
}

// Застосування стилів до елементів
const heading = document.querySelector('h1');
applyStyles(heading);

const paragraph = document.querySelector('p');
applyStyles(paragraph);

const link = document.querySelector('a');
applyStyles(link);

JS довідник

JavaScript

Наповнення JS розділу

JS властивість Element.tagName

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

Синтаксис

Значення

Return

Переглядачі

Приклади