css.in.ua
Підтримати

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

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

Властивість firstElementChild є частиною об'єктної моделі документа (DOM) і дозволяє отримати доступ до першого вузла-елемента, який є безпосереднім нащадком вказаного батьківського елемента. Ця властивість є зручним інструментом для маніпуляцій з вмістом веб-сторінки за допомогою JavaScript, оскільки надає прямий доступ до дочірніх елементів без необхідності перебору всіх вузлів.

Використання властивості firstElementChild є простим і прямолінійним. Розглянемо приклад з HTML-розміткою:

<div id="parent">
  <p>Перший параграф</p>
  <span>Текстовий вузол</span>
  <div>Вкладений div</div>
</div>

Щоб отримати доступ до першого елемента <p> всередині батьківського <div>, можна використати наступний код JavaScript:

const parentElement = document.getElementById('parent');
const firstChild = parentElement.firstElementChild;
console.log(firstChild); // <p>Перший параграф</p>

У наведеному прикладі змінна firstChild містить посилання на перший елемент <p> всередині батьківського <div>. Важливо зазначити, що firstElementChild ігнорує текстові вузли та інші неелементні вузли, такі як коментарі або інструкції для обробника.

Властивість firstElementChild може бути корисною в різних сценаріях, наприклад, для маніпуляцій зі стилями чи вмістом першого дочірнього елемента. Розглянемо приклад зміни кольору тексту першого дочірнього елемента:

const parentElement = document.getElementById('parent');
const firstChild = parentElement.firstElementChild;
firstChild.style.color = 'red';

Цей код змінить колір тексту першого параграфа на червоний.

Іноді може виникнути потреба перевірити наявність першого дочірнього елемента перед виконанням будь-яких операцій. Для цього можна використати умовну конструкцію:

const parentElement = document.getElementById('parent');
if (parentElement.firstElementChild) {
  const firstChild = parentElement.firstElementChild;
  // Виконати операції з firstChild
} else {
  // Обробити випадок, коли немає дочірніх елементів
}

Властивість firstElementChild є частиною сімейства властивостей для роботи з дочірніми елементами, таких як lastElementChild, children та childElementCount. Разом вони забезпечують зручний інтерфейс для маніпуляцій з вмістом веб-сторінки за допомогою JavaScript.

Порада:

Зверніть увагу, що якщо батьківський елемент не має нащадків, метод firstElementChild поверне значення null. Перед використанням цього методу перевірте, чи існують нащадки, щоб уникнути помилок у коді. Наприклад:

let parentElement = document.getElementById('parent');
if (parentElement.firstElementChild !== null) {
  // Робимо дії з першим нащадком
} else {
  console.log('Нащадки відсутні');
}
Порада:

Використовуйте firstElementChild разом з методами навігації по DOM, такими як querySelector або getElementById, для точного вибору елементів на сторінці. Це дозволяє ефективно працювати зі структурою документа. Наприклад:

let parentElement = document.querySelector('.parent');
let firstChild = parentElement.firstElementChild;
// Виконуємо дії з першим нащадком
Порада:

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

Синтаксис

Element.firstElementChild

Значення

Return

Переглядачі

Переглядач

2

3.5

4

10

12
Переглядач

37

18

4

3
Переглядач

-

-

Приклади


У цьому прикладі ми маємо батьківський елемент div з ідентифікатором parent, який містить три дочірні елементи: span, div та p. Скрипт знаходить першого дочірнього елемента (span) за допомогою властивості firstElementChild і виводить його тег та текстовий вміст у блок output.

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

У цьому прикладі ми знаходимо перший дочірній елемент (тег) вузла з id="container" і встановлюємо його колір тексту на червоний.

// Отримуємо посилання на батьківський елемент з id="container"
const parentElement = document.getElementById("container");

// Отримуємо посилання на перший дочірній елемент
const firstChild = parentElement.firstElementChild;

// Змінюємо колір тексту першого дочірнього елемента на червоний
firstChild.style.color = "red";

У цьому прикладі ми шукаємо перший дочірній елемент (тег) вузла з класом "list" та додаємо до нього новий пункт списку.

// Отримуємо посилання на елемент з класом "list"
const listElement = document.querySelector(".list");

// Отримуємо посилання на перший дочірній елемент елементу з класом "list"
const firstChild = listElement.firstElementChild;

// Створюємо новий пункт списку
const newItem = document.createElement("li");
newItem.textContent = "New item";

// Додаємо новий пункт списку як перший дочірній елемент елементу з класом "list"
listElement.insertBefore(newItem, firstChild);

Спільнота

Зв'язок