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

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

nodeName є властивістю елемента в об'єктній моделі документа (DOM), що повертає ім'я вузла у вигляді рядка. Для елементів HTML ця властивість повертає назву тегу у верхньому регістрі, наприклад 'DIV' для <div> або 'P' для <p>. Властивість nodeName є корисним інструментом для ідентифікації типу вузла та виконання різноманітних операцій на основі цієї інформації.

Розглянемо приклад використання nodeName. Нехай у нас є така структура HTML:

<div id="parent">
  <p>Перший параграф</p>
  <span>Текстовий вузол</span>
  <p>Другий параграф</p>
</div>

Ми можемо отримати доступ до елементів DOM та перевірити їх nodeName за допомогою JavaScript:

const parentElement = document.querySelector('#parent');
const firstChild = parentElement.firstElementChild;
console.log(firstChild.nodeName); // 'P'

const secondChild = firstChild.nextElementSibling;
console.log(secondChild.nodeName); // 'SPAN'

У цьому прикладі ми отримуємо батьківський елемент #parent та його перший та другий дочірні елементи. Потім ми виводимо nodeName для кожного елемента, що дає нам 'P' для першого елемента <p> та 'SPAN' для елемента <span>.

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

const parentElement = document.querySelector('#parent');
const childElements = parentElement.children;

for (let i = 0; i < childElements.length; i++) {
  const child = childElements[i];
  if (child.nodeName === 'P') {
    child.style.color = 'red';
  }
}

У цьому прикладі ми отримуємо всі дочірні елементи батьківського елемента #parent за допомогою children. Потім ми ітеруємо через ці елементи за допомогою циклу for та перевіряємо nodeName кожного елемента. Якщо nodeName дорівнює 'P', ми змінюємо колір тексту цього елемента на червоний.

Властивість nodeName також може бути корисною для створення нових елементів DOM динамічно. Наприклад, щоб створити новий елемент <div> та вставити його в батьківський елемент #parent, ми можемо використати такий код:

const parentElement = document.querySelector('#parent');
const newElement = document.createElement('div');
newElement.textContent = 'Новий елемент';

if (parentElement.firstElementChild) {
  parentElement.insertBefore(newElement, parentElement.firstElementChild);
} else {
  parentElement.appendChild(newElement);
}

У цьому прикладі ми створюємо новий елемент <div> за допомогою document.createElement('div') та встановлюємо його текстовий вміст. Потім ми перевіряємо, чи існує перший дочірній елемент у батьківському елементі #parent. Якщо існує, ми використовуємо метод insertBefore для вставки нового елемента перед першим дочірнім елементом. Інакше ми використовуємо метод appendChild для додавання нового елемента в кінець батьківського елемента.

Крім того, властивість nodeName може бути корисною для перевірки типу вузла перед виконанням певних операцій. Наприклад, якщо ми хочемо отримати текстовий вміст елемента, але не хочемо, щоб він включав текстові вузли, ми можемо перевірити nodeName перед доступом до textContent:

const element = document.querySelector('#myElement');
let content = '';

for (let i = 0; i < element.childNodes.length; i++) {
  const node = element.childNodes[i];
  if (node.nodeName === '#text') {
    content += node.textContent;
  }
}

console.log(content);

У цьому прикладі ми ітеруємо через всі дочірні вузли елемента #myElement за допомогою childNodes. Для кожного вузла ми перевіряємо, чи його nodeName дорівнює '#text', що означає, що це текстовий вузол. Якщо так, ми додаємо його textContent до змінної content. Після циклу ми виводимо content, що містить текстовий вміст елемента без текстових вузлів.

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

Синтаксис

Element.nodeName

Значення

Return

Переглядачі

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

Приклади

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

<button id="getNodeName">Отримати назву елемента</button>

<script>
const button = document.getElementById('getNodeName');

button.addEventListener('click', () => {
  const bodyNode = document.body;
  const nodeName = bodyNode.nodeName; // nodeName буде рівним "BODY"
  console.log(`Назва елемента: ${nodeName}`);
});
</script>

<form>
  <input type="text" id="newItem" placeholder="Введіть новий елемент">
  <button type="button" id="addItem">Додати</button>
</form>
<ul id="itemList"></ul>

<script>
const form = document.querySelector('form');
const input = document.getElementById('newItem');
const addButton = document.getElementById('addItem');
const itemList = document.getElementById('itemList');

addButton.addEventListener('click', () => {
  const inputValue = input.value.trim();
  if (inputValue !== '') {
    const newItem = document.createElement('li');
    newItem.textContent = inputValue;
    itemList.appendChild(newItem);
    input.value = '';
  }
});

form.addEventListener('click', (event) => {
  const target = event.target;
  if (target.nodeName === 'INPUT') {
    // Якщо клік відбувся на текстовому полі, виконайте певні дії
    console.log('Клік на текстовому полі');
  }
});
</script>