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

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

lastChild - це властивість об'єкта Element в JavaScript, яка повертає останній дочірній вузол заданого вузла. Ця властивість дозволяє отримати доступ до останнього дочірнього вузла, незалежно від його типу (елемент, текстовий вузол, коментар тощо).

Основна сфера застосування властивості lastChild - маніпуляції з деревом документа та обхід його вузлів. Вона корисна для різноманітних операцій, таких як додавання, видалення або модифікація вмісту елементів на веб-сторінці, обробка XML-документів та інших випадків, де потрібно працювати з ієрархічною структурою вузлів.

Розглянемо приклад використання lastChild з HTML-документом:

<div id="container">
  <p>Перший абзац</p>
  <p>Другий абзац</p>
  <!-- Коментар -->
</div>

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

console.log(lastChild.nodeType); // Виведе 8 (тип вузла для коментаря)
console.log(lastChild.nodeValue); // Виведе "Коментар"

У цьому прикладі ми отримуємо вузол div з ідентифікатором container. Потім ми використовуємо властивість lastChild для отримання останнього дочірнього вузла, який є коментарем. Ми виводимо тип вузла (nodeType) та його значення (nodeValue) в консоль.

Властивість lastChild також можна використовувати з XML-документами та іншими типами вузлів, такими як атрибути та текстові вузли. Наприклад:

<?xml version="1.0"?>
<root>
  <child>Перший дочірній елемент</child>
  <child>Другий дочірній елемент</child>
</root>

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const rootNode = xmlDoc.documentElement;
const lastChild = rootNode.lastChild;

console.log(lastChild.tagName); // Виведе "child"
console.log(lastChild.textContent); // Виведе "Другий дочірній елемент"

У цьому прикладі ми створюємо XML-документ та отримуємо кореневий вузол root. Потім ми використовуємо lastChild для отримання останнього дочірнього вузла, який є елементом child. Ми виводимо ім'я тега (tagName) та текстовий вміст (textContent) цього вузла в консоль.

Варто зазначити, що lastChild може повернути null, якщо вузол не має дочірніх вузлів. Тому перед використанням властивості lastChild рекомендується перевіряти, чи вузол має дочірні вузли, наприклад, за допомогою властивості hasChildNodes().

Крім того, lastChild часто використовується у поєднанні з іншими властивостями та методами, такими як firstChild, childNodes, appendChild() та removeChild(), для більш складних маніпуляцій з деревом документа.

Синтаксис

Element.lastChild

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо елемент ul
const list = document.createElement('ul');

// Додаємо елементи li до списку
const item1 = document.createElement('li');
item1.textContent = 'Елемент 1';
list.appendChild(item1);

const item2 = document.createElement('li');
item2.textContent = 'Елемент 2';
list.appendChild(item2);

// Отримуємо останній дочірній вузол списку
const lastItem = list.lastChild;

// Виводимо текстовий вміст останнього вузла
console.log(lastItem.textContent); // "Елемент 2"

function removeLastChild(parentNode) {
  const lastChild = parentNode.lastChild;

  if (lastChild) {
    parentNode.removeChild(lastChild);
  }
}

// Створюємо елемент ul
const list = document.createElement('ul');

// Додаємо елементи li до списку
const item1 = document.createElement('li');
item1.textContent = 'Елемент 1';
list.appendChild(item1);

const item2 = document.createElement('li');
item2.textContent = 'Елемент 2';
list.appendChild(item2);

const item3 = document.createElement('li');
item3.textContent = 'Елемент 3';
list.appendChild(item3);

// Видаляємо останній дочірній вузол списку
removeLastChild(list);

// Додаємо список до документа
document.body.appendChild(list);