JavaScript childNodes — усі дочірні вузли, включно з текстом

Властивість childNodes повертає всі дочірні вузли — включно з текстовими й коментарями.

правити

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

Це та властивість, через яку новачки втрачають годину. У гарно відформатованій розмітці між теґами є переноси рядків, а кожен перенос — це текстовий вузол. Тому список із двох <li> дає п'ять дочірніх вузлів: текст, li, текст, li, текст.

Потрібні лише теґи — бери children. Різниця в одному слові, а наслідки величезні.

Повертається живий NodeList — методів масиву в нього немає, тож для filter() чи map() доведеться розгорнути спредом.

правити

Нотатка

childNodes — живий список: він оновлюється сам, коли DOM змінюється. Видалення елементів у циклі по ньому дає класичний баг «видалилась половина».

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

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

Переглядачі

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

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

Переглядач
childNodes	1+	1+	1+	7+	12+	9+

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

Переглядач
childNodes	yes	yes	yes	yes

Приклади

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

<ul id="list">
    <li>Перший</li>
    <li>Другий</li>
</ul>

const list = document.getElementById('list');

console.log(list.childNodes.length); // 5 — текст, li, текст, li, текст
console.log(list.children.length);   // 2 — лише теґи

// список живий: видаляти в циклі по ньому — пастка
// for (const node of list.childNodes) node.remove(); // видалить половину!

// правильно — зафіксувати копію
for (const node of [...list.childNodes]) {
    node.remove();
}