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 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
45 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє динамічну взаємодію з веб-сторінкою за допомогою JavaScript. Користувач може додавати нові елементи списку, натискаючи на кнопку "Додати елемент", або видаляти останній елемент зі списку, натискаючи на кнопку "Видалити останній елемент".
При кожній зміні списку, властивість lastChild використовується для отримання останнього дочірнього вузла списку ul. Текстовий вміст цього останнього елемента виводиться в елементі <p> з ідентифікатором output. Якщо список порожній, виводиться відповідне повідомлення.
Цей приклад ілюструє, як властивість lastChild може бути використана для доступу та маніпуляції з останнім дочірнім вузлом елемента. Він демонструє зміну DOM (Document Object Model) за допомогою JavaScript та взаємодію з користувачем через кнопки.
Користувач може взаємодіяти зі сторінкою, натискаючи на кнопки для додавання або видалення елементів зі списку, і спостерігати, як змінюється останній дочірній вузол списку та відповідний вивід на сторінці.
Цей приклад є корисним для демонстрації роботи властивості lastChild в контексті маніпуляції DOM за допомогою JavaScript, а також для ілюстрації динамічної взаємодії з веб-сторінкою.
У цьому прикладі ми створюємо елемент <ul> та додаємо до нього два елементи <li>. Потім ми використовуємо властивість lastChild для отримання останнього дочірнього вузла списку, яким є другий елемент <li>. Нарешті, ми виводимо текстовий вміст останнього вузла у консоль.
// Створюємо елемент 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"У цьому прикладі ми створюємо функцію removeLastChild, яка приймає батьківський вузол як аргумент. Функція отримує останній дочірній вузол батьківського вузла за допомогою властивості lastChild та видаляє його, використовуючи метод removeChild.
Далі ми створюємо елемент <ul> та додаємо до нього три елементи <li>. Потім ми викликаємо функцію removeLastChild для списку, що призводить до видалення останнього елемента <li>. Нарешті, ми додаємо змінений список до документа.
У цьому прикладі ми демонструємо, як можна використовувати властивість lastChild для доступу та маніпулювання останнім дочірнім вузлом елемента. Це може бути корисним у різних сценаріях, таких як динамічне оновлення вмісту, видалення або переміщення вузлів у структурі DOM.
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);