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-структурі та отримання доступу до перших елементів у вкладених структурах документа.
Порада: | Для безпеки і уникнення помилок, рекомендується перевіряти, чи існує дочірній елемент, перед тим як взяти до нього доступ. Наприклад:
|
Порада: | Пам'ятайте, що властивість |
Синтаксис
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
для от
У цьому простому прикладі ми маємо список <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);