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 може призвести до помилок.

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

Порада

Пам'ятайте, що lastElementChild повертає лише елементи-нащадки вузла. Якщо у вузла є текстові вузли або інші типи вузлів, вони будуть проігноровані. Якщо вам потрібно отримати останній вузол будь-якого типу, використовуйте властивість lastChild.

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

Порада

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

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

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

Синтаксис

Element.lastElementChild

Переглядачі

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

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

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

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

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

Приклади

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

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

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

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

<div class="container">
    <p>Перший елемент</p>
    <p>Останній — дістане тло і відступи</p>
</div>

const container = document.querySelector('.container');
const lastElementInContainer = container.lastElementChild;

lastElementInContainer.style.backgroundColor = '#f0f0f0';
lastElementInContainer.style.padding = '10px';