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, яка повертає колекцію лише елементів-нащадків, виключаючи інші типи вузлів.
| Порада: | Якщо потрібно працювати лише з елементами-нащадками, використовуй властивість |
| Порада: | Пам'ятай, що |
| Порада: | Використовуй |
Синтаксис
Element.childNodesЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1.2 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання childNodes для отримання доступу до дочірніх вузлів елемента parent та маніпулювання ними. Користувач може натиснути на кнопку "Показати дочірні вузли", щоб вивести список всіх дочірніх вузлів елемента parent у невпорядкованому списку. Також є кнопка "Видалити текстові вузли", яка видаляє всі текстові вузли з елемента parent.
У цьому прикладі ми виводимо всі дочірні вузли елемента parent у консоль. Це демонструє базове використання childNodes для отримання доступу до всіх дочірніх вузлів елемента, включно з текстовими вузлами та вузлами коментарів.
<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>У цьому прикладі ми видаляємо всі текстові вузли з елемента parent. Це демонструє використання childNodes для маніпулювання дочірніми вузлами. Ми ітеруємось по childNodes у зворотному порядку, щоб уникнути проблем з індексами під час видалення вузлів. Також ми перевіряємо тип вузла за допомогою nodeType, щоб видалити лише текстові вузли.
<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>