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

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

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

Найбільш поширені значення nodeType включають:

• Node.ELEMENT_NODE (1) - вузол є елементом HTML, наприклад <div> або <p>.
• Node.TEXT_NODE (3) - вузол є текстовим вузлом, що містить текстовий вміст елемента.
• Node.COMMENT_NODE (8) - вузол є коментарем HTML.
• Node.DOCUMENT_NODE (9) - вузол є коренем документа.

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

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

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

const parentElement = document.querySelector('#parent');
const firstChild = parentElement.firstChild;
console.log(firstChild.nodeType); // 1 (Node.ELEMENT_NODE)

const secondChild = firstChild.nextSibling;
console.log(secondChild.nodeType); // 3 (Node.TEXT_NODE)

const thirdChild = secondChild.nextSibling;
console.log(thirdChild.nodeType); // 8 (Node.COMMENT_NODE)

У цьому прикладі ми отримуємо батьківський елемент #parent та його перший, другий та третій дочірні вузли. Потім ми виводимо nodeType для кожного вузла, що дає нам 1 (Node.ELEMENT_NODE) для першого елемента <p>, 3 (Node.TEXT_NODE) для текстового вузла між елементами <p> та <span>, та 8 (Node.COMMENT_NODE) для коментаря HTML.

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

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

for (let i = 0; i < childNodes.length; i++) {
  const child = childNodes[i];
  if (child.nodeType === Node.COMMENT_NODE) {
    parentElement.removeChild(child);
    i--; // Зменшуємо i, оскільки довжина childNodes зменшилася
  }
}

У цьому прикладі ми отримуємо всі дочірні вузли батьківського елемента #parent за допомогою childNodes. Потім ми ітеруємо через ці вузли за допомогою циклу for та перевіряємо nodeType кожного вузла. Якщо nodeType дорівнює Node.COMMENT_NODE, ми видаляємо цей вузол з батьківського елемента за допомогою removeChild. Після видалення вузла ми зменшуємо лічильник i на 1, оскільки довжина childNodes зменшилася після видалення вузла.

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

const paragraph = document.createElement('p');
const textNode = document.createTextNode('Новий текстовий вузол');

paragraph.appendChild(textNode);
console.log(textNode.nodeType); // 3 (Node.TEXT_NODE)

У цьому прикладі ми створюємо новий елемент <p> за допомогою document.createElement('p') та новий текстовий вузол за допомогою document.createTextNode('Новий текстовий вузол'). Потім ми додаємо текстовий вузол до елемента <p> за допомогою appendChild. Після цього ми можемо перевірити nodeType створеного текстового вузла, що дасть нам 3 (Node.TEXT_NODE).

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

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

for (let i = 0; i < element.childNodes.length; i++) {
  const node = element.childNodes[i];
  if (node.nodeType === Node.TEXT_NODE) {
    content += node.textContent;
  }
}

console.log(content);

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

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

Синтаксис

Element.nodeType

Значення

Return

Переглядачі

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

Приклади

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

<button id="getNodeType">Отримати тип вузла</button>

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

button.addEventListener('click', () => {
  const bodyNode = document.body;
  const nodeType = bodyNode.nodeType; // nodeType буде рівним 1 (Node.ELEMENT_NODE)
  console.log(`Тип вузла: ${nodeType}`);
});
</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.nodeType === Node.TEXT_NODE) {
    // Якщо клік відбувся на текстовому вузлі, виконайте певні дії
    console.log('Клік на текстовому вузлі');
  }
});
</script>