JavaScript children — дочірні елементи без текстових вузлів

Властивість children повертає лише дочірні елементи — теґи, без текстових вузлів і коментарів.

правити

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

Це те, що потрібно в 99% випадків — на відміну від childNodes, який тягне ще й пробіли між теґами.

Повертає HTMLCollection, і це живий список: додав елемент — він одразу з'явився. Через це видаляти елементи в циклі по children небезпечно, як і по childNodes.

Методів масиву в нього теж немає — тільки спред.

правити

Нотатка

Список живий. Цикл for (const el of parent.children) el.remove() видалить лише половину — індекси зсуваються на льоту. Спершу зафіксуй копію: [...parent.children].

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

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

Переглядачі

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

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

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

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

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

Приклади

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

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

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

console.log(list.children.length);   // 2 — лише теґи
console.log(list.childNodes.length); // 5 — разом із пробілами

// живий список: додали — з'явилось само
list.append(document.createElement('li'));
console.log(list.children.length); // 3

// НЕ роби так — видалить половину
// for (const el of list.children) el.remove();

// правильно — копія
for (const el of [...list.children]) {
    el.remove();
}