JavaScript firstChild — перший дочірній вузол

Властивість firstChild повертає перший дочірній вузол — будь-якого типу.

правити

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

У розмітці, записаній у кілька рядків, першим вузлом майже завжди виявляється перенос рядка, а не теґ. Тому list.firstChild частіше за все — це текстовий вузол із пробілами, і спроба звернутись до його classList кине помилку.

Потрібен саме перший елемент — бери firstElementChild.

правити

Порада

Слово Element у назві — і є той запобіжник, що відсіює пробіли. Забув його — отримав текстовий вузол.

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

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

Переглядачі

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

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

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

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

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

Приклади

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

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

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

console.log(list.firstChild.nodeType);        // 3 — текст!
console.log(list.firstElementChild.nodeType); // 1 — елемент

console.log(list.firstElementChild.textContent); // 'Перший'

// типова помилка:
// list.firstChild.classList.add('active'); → TypeError