JS метод Element.hasChildNodes()

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

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

Використання методу hasChildNodes() є досить простим і не потребує жодних аргументів. Розглянемо кілька прикладів:

<div id="parent">
  <p>Це параграф</p>
  <!-- Коментар -->
</div>

const parentNode = document.getElementById('parent');

// Перевірка наявності дочірніх вузлів
if (parentNode.hasChildNodes()) {
  console.log('Вузол має дочірні вузли');
} else {
  console.log('Вузол не має дочірніх вузлів');
}
// Виведе: "Вузол має дочірні вузли"

У цьому прикладі елемент div з id="parent" має два дочірні вузли: елемент p та коментар. Метод hasChildNodes() повертає true, оскільки вузол має принаймні один дочірній вузол.

Метод hasChildNodes() може бути особливо корисним при роботі з ієрархічними структурами даних, такими як DOM-дерево. Наприклад, ви можете використовувати цей метод у поєднанні з рекурсивною функцією для обходу всіх вузлів дерева та обробки тих, що мають дочірні вузли:

function traverseTree(node) {
  if (node.hasChildNodes()) {
    const childNodes = node.childNodes;
    for (let i = 0; i < childNodes.length; i++) {
      traverseTree(childNodes[i]);
    }
    // Обробка вузла з дочірніми вузлами
  } else {
    // Обробка вузла без дочірніх вузлів
  }
}

const rootNode = document.documentElement;
traverseTree(rootNode);

У цьому прикладі функція traverseTree рекурсивно обходить всі вузли DOM-дерева, починаючи з кореневого вузла (document.documentElement). Для кожного вузла викликається метод hasChildNodes(). Якщо вузол має дочірні вузли, функція викликається рекурсивно для кожного дочірнього вузла, а потім виконується обробка поточного вузла. Якщо дочірніх вузлів немає, виконується обробка поточного вузла без дочірніх вузлів.

Крім того, метод hasChildNodes() може бути корисним для перевірки наявності контенту всередині елемента перед його видаленням або модифікацією. Це допоможе уникнути втрати важливих даних та забезпечити належну обробку елементів з вмістом.

Синтаксис

hasChildNodes()

Параметри

Return

boolean

Повертає булеве значення true, якщо вузол має дочірні вузли, і false у протилежному випадку. Дочірніми вузлами вважаються всі типи вузлів, включно з елементами, текстовими вузлами та коментарями, що знаходяться всередині вузла.

Переглядачі

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

Приклади

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

// Отримуємо батьківський елемент
const parentElement = document.getElementById('parent');

// Перевіряємо, чи має батьківський елемент дочірні вузли
if (parentElement.hasChildNodes()) {
  console.log('Батьківський елемент має дочірні вузли:');

  // Ітеруємо через дочірні вузли
  const childNodes = parentElement.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i];
    
    // Перевіряємо тип вузла та виводимо його вміст
    if (node.nodeType === Node.ELEMENT_NODE) {
      console.log(`- Елемент: ${node.outerHTML}`);
    } else if (node.nodeType === Node.TEXT_NODE) {
      console.log(`- Текстовий вузол: "${node.textContent}"`);
    }
  }
} else {
  console.log('Батьківський елемент не має дочірніх вузлів.');
}

<button id="addItem">Додати елемент</button>
<ul id="list"></ul>

<script>
// Отримуємо список
const list = document.getElementById('list');

// Отримуємо кнопку
const addButton = document.getElementById('addItem');

// Додаємо обробник події для кнопки
addButton.addEventListener('click', () => {
  // Створюємо новий елемент списку
  const newItem = document.createElement('li');
  newItem.textContent = 'Новий елемент';

  // Додаємо новий елемент до списку
  list.appendChild(newItem);

  // Перевіряємо, чи має список дочірні вузли
  if (list.hasChildNodes()) {
    list.style.display = 'block'; // Показуємо список
  }
});

// Перевіряємо, чи має список дочірні вузли при завантаженні сторінки
if (!list.hasChildNodes()) {
  list.style.display = 'none'; // Приховуємо порожній список
}
</script>