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

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

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

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

Node.ELEMENT_NODE (1) - вузол є елементом HTML, наприклад <div> або .
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) для першого елемента , 3 (Node.TEXT_NODE) для текстового вузла між елементами  та , та 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 динамічно. Наприклад, щоб створити новий текстовий вузол та додати його до елемента , ми можемо використати такий код:

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

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

У цьому прикладі ми створюємо новий елемент  за допомогою document.createElement('p') та новий текстовий вузол за допомогою document.createTextNode('Новий текстовий вузол'). Потім ми додаємо текстовий вузол до елемента  за допомогою 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 забезпечує гнучкість та контроль над структурою веб-сторінки.

Порада:

При обході структури DOM, використовуйте nodeType для фільтрації вузлів за типом. Це особливо корисно, коли ви хочете виконати певні операції лише з певними типами вузлів, наприклад, лише з елементами або лише з текстовими вузлами. Наприклад:

for (let node of parentNode.childNodes) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    // Виконуємо операції лише з елементами
  }
}

Порада:

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

Порада:

При видаленні вузлів з DOM, будьте обережні з використанням nodeType. Після видалення вузла довжина childNodes може змінитися, що може призвести до помилок під час обходу. Щоб уникнути цього, зберігайте посилання на наступний вузол перед видаленням поточного або використовуйте цикл while замість for.

let currentNode = parentNode.firstChild;
while (currentNode) {
  const nextNode = currentNode.nextSibling;
  if (currentNode.nodeType === Node.COMMENT_NODE) {
    parentNode.removeChild(currentNode);
  }
  currentNode = nextNode;
}

Синтаксис

Element.nodeType

Значення

Return

Переглядачі

Переглядач
	1	1	1.1	7	12

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

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

Приклади

У цьому прикладі ми маємо контейнер з різними елементами (div, span, a) та текстовим вузлом. При натисканні на будь-який з цих елементів або текст ми визначаємо його тип за допомогою властивості nodeType і виводимо це значення в елемент #output.

Властивість nodeType повертає числове значення, яке відповідає типу вузла. Ми використовуємо оператор switch для визначення назви типу вузла на основі його числового значення. Для зручності ми використовуємо константи Node.ELEMENT_NODE (1) та Node.TEXT_NODE (3), які представляють елемент та текстовий вузол відповідно.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/yLrbxBe">
  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>.

У цьому прикладі ми демонструємо використання властивості nodeType для визначення типу вузла DOM. Ми створюємо кнопку, при натисканні на яку виводиться тип вузла body у консоль.

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

У цьому прикладі ми демонструємо використання властивості nodeType для перевірки типу вузла перед виконанням певних дій. Ми створюємо форму з текстовим полем та кнопкою "Додати". При натисканні на кнопку ми перевіряємо, чи є поточний елемент текстовим вузлом, і якщо так, то додаємо введене значення до списку.

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

JS довідник

Events

JavaScript

Statements

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади