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.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/NWmRqPJ">
  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>.

У цьому прикладі ми знаходимо перший дочірній елемент (тег) вузла з 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);

JS довідник

JavaScript

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

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади