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

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

childNodes є властивістю об'єкта Element, що представляє колекцію вузлів-нащадків даного вузла. Ця властивість надає доступ до всіх дочірніх вузлів елемента, включно з текстовими вузлами та вузлами коментарів. Основна корисність childNodes полягає в можливості маніпулювати та обходити дочірні вузли елемента програмно.

Властивість childNodes повертає об'єкт NodeList, що є подібним до масиву колекцією вузлів. Елементи NodeList можна обходити за допомогою циклу або доступатися до них за індексом, як до елементів масиву. Проте, на відміну від масивів, NodeList є "живою" колекцією, що автоматично оновлюється при змінах у дереві документа.

Розглянемо приклад використання childNodes для виведення всіх дочірніх вузлів елемента:

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

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

for (let i = 0; i < childNodes.length; i++) {
  console.log(childNodes[i]);
}

Цей код виведе всі дочірні вузли елемента parent, включно з текстовими вузлами та вузлами коментарів.

Властивість childNodes часто використовується для обходу та маніпулювання дочірніми вузлами елемента. Наприклад, можна видалити всі текстові вузли з елемента:

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

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

Цей код ітерується по всіх дочірніх вузлах елемента parent і видаляє ті, що є текстовими вузлами.

Також можна використовувати childNodes для вставки нових вузлів у певну позицію в дереві документа:

const parentNode = document.getElementById('parent');
const newNode = document.createElement('div');
newNode.textContent = 'Новий вузол';

const firstChild = parentNode.childNodes[0];
parentNode.insertBefore(newNode, firstChild);

У цьому прикладі створюється новий вузол div і вставляється перед першим дочірнім вузлом елемента parent.

Слід зазначити, що childNodes включає всі типи вузлів, включно з текстовими вузлами та вузлами коментарів. Якщо потрібно працювати лише з елементами, краще використовувати властивість children, яка повертає колекцію лише елементів-нащадків, виключаючи інші типи вузлів.

правити

Порада

Пам'ятай, що childNodes повертає "живу" колекцію, що автоматично оновлюється при змінах у дереві документа. Тому, якщо ти зберігаєш посилання на childNodes і плануєш ітерувати по ній пізніше, краще зробити копію колекції, щоб уникнути непередбачуваної поведінки.

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

Порада

Якщо потрібно працювати лише з елементами-нащадками, використовуй властивість children замість childNodes. Це спростить код і уникне необхідності перевіряти тип вузла.

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

Порада

Використовуй childNodes для вставки нових вузлів у певну позицію в дереві документа. Метод insertBefore() дозволяє вставити новий вузол перед вказаним дочірнім вузлом:

const parentNode = document.getElementById('parent');
const newNode = document.createElement('div');
newNode.textContent = 'Новий вузол';

const firstChild = parentNode.childNodes[0];
parentNode.insertBefore(newNode, firstChild);

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

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

Синтаксис

Element.childNodes

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

<script>
const parentNode = document.getElementById('parent');
const childNodes = parentNode.childNodes;

// Ітерація по всіх дочірніх вузлах
for (let i = 0; i < childNodes.length; i++) {
  console.log(childNodes[i]);
}
</script>

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

<script>
const parentNode = document.getElementById('parent');
const childNodes = parentNode.childNodes;

// Ітерація по всіх дочірніх вузлах у зворотному порядку
for (let i = childNodes.length - 1; i >= 0; i--) {
  const node = childNodes[i];

  // Перевірка типу вузла
  if (node.nodeType === Node.TEXT_NODE) {
    // Видалення текстового вузла
    parentNode.removeChild(node);
  }
}
</script>