tagName в JavaScript — назва тега елемента

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

Властивість 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 з рядком, використовуйте верхній регістр для уникнення помилок.

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

Порада

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

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

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

Порада

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

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

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

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

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

Синтаксис

Element.tagName

Переглядачі

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

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

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

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

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

Приклади

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

<h1>Заголовок</h1>
<p>Абзац для прикладу.</p>
<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

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);

<header>
  <h2 class="title">Element: tagName property</h2>
  <p class="description">Повертає ім'я (назву) тегу для поточного елемента DOM як рядок у верхньому регістрі.</p>
</header>
<main>
  <div class="result">
    <label>
      Введіть текст:
      <input type="text" id="inputText" placeholder="Введіть текст...">
    </label>
    <button id="addElement">Додати елемент</button>
    <div id="container"></div>
  </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);
}

#container {
  margin-top: 15px;
}

#container > * {
  margin-bottom: 5px;
}

const inputText = document.getElementById('inputText');
const addElementBtn = document.getElementById('addElement');
const container = document.getElementById('container');

addElementBtn.addEventListener('click', () => {
  const text = inputText.value.trim();
  if (text) {
    const randomTag = ['div', 'span', 'p', 'h1', 'h2', 'h3'][Math.floor(Math.random() * 6)];
    const newElement = document.createElement(randomTag);
    newElement.textContent = text;
    newElement.addEventListener('click', () => {
      alert(`Ви клікнули на елемент "${newElement.tagName}"`);
    });
    container.appendChild(newElement);
    inputText.value = '';
  }
});
//# sourceURL=pen.js

<div>Демонстраційний блок</div>
<span>рядковий елемент</span>
<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

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"