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

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

Властивість firstChild є властивістю об'єкта Element у JavaScript і надає доступ до першого дочірнього елемента, що є безпосередньо дочірнім вказаного елемента. Основна суть цієї властивості полягає в тому, що вона дозволяє отримати доступ до першого дочірнього елемента у DOM-структурі елемента, що є корисним при навігації та роботі зі структурою документа.

Однією з основних сфер застосування властивості firstChild є робота з деревом DOM, де потрібно отримувати доступ до перших елементів у вкладених структурах. Вона може бути корисною при пошуку, маніпулюванні та модифікації контенту на сторінці.

Для використання властивості firstChild найпростіший спосіб - просто звернутися до неї через об'єкт елемента, який ви хочете дослідити. Наприклад:

const parentElement = document.getElementById('parent');
const firstChildElement = parentElement.firstChild;

console.log(firstChildElement);

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

Однак, варто зазначити, що firstChild може повертати не тільки елементи, але й текстові вузли, коментарі та інші типи вузлів. Тому, щоб впевнитися, що отриманий вузол є саме елементом, може бути використано перевірку:

const firstChildElement = parentElement.firstChild;
if (firstChildElement.nodeType === Node.ELEMENT_NODE) {
    console.log('Перший дочірній елемент:', firstChildElement);
} else {
    console.log('Перший дочірній вузол не є елементом.');
}

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

Враховуючи вищезазначені приклади, ви можете користуватися властивістю firstChild для ефективної навігації по DOM-структурі та отримання доступу до перших елементів у вкладених структурах документа.

правити

Порада

Пам'ятайте, що властивість firstChild може повернути текстовий вузол або пробіли, а не завжди елемент. Якщо потрібно отримати перший елемент-дочірній, зазвичай використовується метод firstElementChild.

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

Порада

Для безпеки і уникнення помилок, рекомендується перевіряти, чи існує дочірній елемент, перед тим як взяти до нього доступ. Наприклад:

if (parentElement.firstChild) {
   // Виконати дії з першим дочірнім елементом
}

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

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

Синтаксис

Element.firstChild

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

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

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

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

Приклади

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

<ul id="list">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

// HTML розмітка
// <ul id="list">
//   <li>Елемент 1</li>
//   <li>Елемент 2</li>
//   <li>Елемент 3</li>
// </ul>

// JavaScript код
const list = document.getElementById("list");

// Отримуємо перший дочірній елемент списку
const firstElement = list.firstChild;

console.log("Перший дочірній елемент списку:", firstElement);

<div id="container">
    <span>Перший спан</span>
    <p>Перший параграф</p>
    <p>Другий параграф</p>
</div>

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

// firstChild — це і текстові вузли (пробіли!), тому шукаємо перший <p>
let firstParagraph = container.firstChild;

while (firstParagraph && (firstParagraph.nodeType !== Node.ELEMENT_NODE || firstParagraph.tagName !== 'P')) {
    firstParagraph = firstParagraph.nextSibling;
}

console.log('Перший параграф у контейнері:', firstParagraph && firstParagraph.textContent);