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

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

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

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

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

Щоб отримати доступ до останнього дочірнього елемента div з id parent, можна використати наступний JavaScript-код:

const parentElement = document.getElementById('parent');
const lastChild = parentElement.lastElementChild;
console.log(lastChild); // <div>Дочірній div</div>

У цьому прикладі lastElementChild повертає останній дочірній елемент <div> вузла parentElement.

lastElementChild є зручним способом маніпулювання або доступу до останнього дочірнього елемента без необхідності ітерації по всіх дочірніх вузлах. Наприклад, можна змінити стиль або вміст останнього дочірнього елемента:

lastChild.style.color = 'red'; // Змінює колір тексту останнього дочірнього елемента на червоний
lastChild.textContent = 'Новий текст'; // Змінює текстовий вміст останнього дочірнього елемента

Важливо зазначити, що lastElementChild ігнорує текстові вузли та інші типи вузлів, які не є елементами. У прикладі вище текстовий вузол <span>Текстовий вузол</span> не враховується при визначенні lastElementChild.

Якщо вузол не має дочірніх елементів, lastElementChild поверне null. Це можна перевірити за допомогою умовного оператора:

const emptyElement = document.createElement('div');
if (emptyElement.lastElementChild) {
  // Код для обробки останнього дочірнього елемента
} else {
  console.log('Немає дочірніх елементів');
}

lastElementChild часто використовується в поєднанні з іншими DOM-методами та властивостями, такими як firstElementChild, children, childNodes та parentElement. Разом вони забезпечують потужні інструменти для маніпулювання та доступу до вузлів DOM-дерева.

Загалом, lastElementChild є корисною властивістю для роботи з DOM-деревом в JavaScript, особливо при необхідності швидкого доступу або модифікації останнього дочірнього елемента вузла без ітерації по всіх дочірніх вузлах.

Порада:	Перевіряйте, чи `lastElementChild` не дорівнює `null` перед виконанням операцій з отриманим елементом. Якщо у вузла немає дочірніх елементів, властивість поверне `null`, і виконання операцій на `null` може призвести до помилок.
Порада:	Використовуйте `lastElementChild` у поєднанні з іншими DOM-методами та властивостями для більш складних маніпуляцій з елементами. Наприклад, ви можете отримати всіх дочірніх елементів за допомогою `children`, а потім виконати операції з останнім елементом, використовуючи `lastElementChild`.
Порада:	Пам'ятайте, що `lastElementChild` повертає лише елементи-нащадки вузла. Якщо у вузла є текстові вузли або інші типи вузлів, вони будуть проігноровані. Якщо вам потрібно отримати останній вузол будь-якого типу, використовуйте властивість `lastChild`.

Синтаксис

Element.lastElementChild

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо контейнер div з ідентифікатором container, який містить кілька дочірніх елементів, включно з текстовим вузлом. При натисканні на кнопку "Змінити останній дочірній елемент" виконується функція changeLastChild().

Ця функція використовує властивість lastElementChild для отримання останнього дочірнього елемента контейнера. Якщо останній дочірній елемент існує, його текстовий вміст змінюється на "Новий текст для останнього дочірнього елемента", і результат відображається в елементі <p> з ідентифікатором output. Якщо дочірніх елементів немає, виводиться відповідне повідомлення.


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

У цьому прикладі ми використовуємо властивість lastElementChild, щоб отримати останній елемент списку <ul>. Потім ми виводимо текстовий вміст цього елемента за допомогою властивості textContent. Цей підхід дозволяє нам легко отримувати доступ до останнього елемента списку без необхідності вручну обчислювати його позицію.

// Отримання останнього елемента списку <ul> за допомогою властивості lastElementChild
const ulList = document.querySelector("ul");
const lastElement = ulList.lastElementChild;

// Виведення текстового вмісту останнього елемента списку
console.log("Текст останнього елемента списку:", lastElement.textContent);

У цьому прикладі ми спочатку знаходимо контейнер з класом "container", а потім отримуємо його останній дочірній елемент за допомогою lastElementChild. Після цього ми додаємо стилі до цього останнього елемента, змінюючи його фоновий колір і встановлюючи відступи. Використання lastElementChild дозволяє нам легко маніпулювати останнім елементом в заданому контейнері, що є особливо корисним при динамічному оновленні вмісту веб-сторінки.

// Отримання останнього елемента дочірнього елемента з класом "container"
const container = document.querySelector(".container");
const lastElementInContainer = container.lastElementChild;

// Додавання стилів до останнього елемента дочірнього елемента з класом "container"
lastElementInContainer.style.backgroundColor = "#f0f0f0";
lastElementInContainer.style.padding = "10px";

JS довідник

JavaScript

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