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-структурі та отримання доступу до перших елементів у вкладених структурах документа.

Порада:

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

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

Порада:

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

Синтаксис

Element.firstChild

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо елемент <div> з ідентифікатором parent, який містить два дочірніх вузли: <span> та <p>. При натисканні на кнопку "Показати першого дочірнього вузла", JavaScript використовує властивість firstChild для отримання першого дочірнього вузла елемента parent.

Отриманий перший дочірній вузол виводиться в <div> з ідентифікатором output. Якщо елемент parent не має дочірніх вузлів, виводиться повідомлення "Немає дочірніх вузлів".

Користувач може взаємодіяти з прикладом, натискаючи на кнопку "Показати першого дочірнього вузла". Це продемонструє використання властивості firstChild для от


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYoZaaV">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому простому прикладі ми маємо список <ul> з декількома елементами <li>. За допомогою властивості firstChild ми отримуємо перший дочірній елемент списку.

// 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> з різними елементами всередині, включаючи <p> та <span>. Ми використовуємо властивість firstChild, але додатково використовуємо цикл while, щоб знайти перший елемент, який є параграфом. Це робиться шляхом переходу до наступного елемента за допомогою nextSibling та перевірки, чи цей елемент є елементом типу ELEMENT_NODE і чи його тег - <p>.

// HTML розмітка
// <div id="container">
//   <p>Перший параграф</p>
//   <span>Перший спан</span>
//   <p>Другий параграф</p>
// </div>

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

// Знаходимо перший елемент, який є параграфом
let firstParagraph = container.firstChild;
while (firstParagraph.nodeType !== Node.ELEMENT_NODE || firstParagraph.tagName !== "P") {
  firstParagraph = firstParagraph.nextSibling;
}

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

JS довідник

JavaScript

Наповнення JS розділу