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(), для більш складних маніпуляцій з деревом документа.

правити

Порада

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

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

Порада

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

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

container.removeChild(lastChild); // Видалити останній дочірній вузол
container.appendChild(firstChild); // Додати перший дочірній вузол в кінець

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

Порада

Властивість lastChild працює не лише з HTML-документами, але й з 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"

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

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

Синтаксис

Element.lastChild

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

Переглядач
	4.4	18	45	1

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

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

Приклади

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

// Створюємо елемент 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);