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 повертає лише елементи-нащадки, ігноруючи текстові вузли та коментарі. Це особливо важливо, коли потрібно працювати з деревом DOM, оскільки забезпечується точність та стабільність операцій навігації.

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

Порада

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

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

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

Порада

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

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

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

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

Синтаксис

Element.firstElementChild

Переглядачі

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

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

Переглядач
	2	3.5	4	10	12

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

Переглядач
	37	18	4	3

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

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

Приклади

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

<div class="list">перший елемент list</div>
<div class="list">другий елемент list</div>

// Отримуємо посилання на елемент з класом "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);

<div id="container">
    <p>Перша дитина — почервоніє</p>
    <p>Друга дитина</p>
</div>

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

// firstElementChild пропускає текстові вузли — одразу перший елемент
const firstChild = parentElement.firstElementChild;

firstChild.style.color = 'red';