JavaScript свойство Node.lastChild

Определение и применение

JavaScript свойство lastChild объекта Node возвращает узел, представляющий из себя последний прямой дочерний узел указанного узла, или null, если указанный узел не имеет детей. Свойство доступно только для чтения.

Для того, чтобы возвратить узел, представляющий из себя первый прямой дочерний узел указанного узла, или null, если указанный узел не имеет детей, то вы можете воспользоваться свойством firstChild.

Обращаю Ваше внимание на то, что пробельный символ внутри элемента рассматривается как текст, а текст в свою очередь является узлом, например:

<div id = "parent-elem">
 <p>Параграф внутри элемента родительского элемента</p>
</div>

В этом примере мы разместили элемент <div> с определенным id, внутри которого мы разместили элемент <p>. Для того, чтобы найти первый и последний прямой дочерний узел элемента <div> необходимо воспользоваться свойствами firstChild и lastChild объекта Node следующим образом:

const parentElem = document.getElementById("parent-elem"); // находим элемент по id

const firstChild = parentElem.firstChild; // инициализируем переменную, содержащую первый прямой дочерний узел указанного узла
const lastChild = parentElem.lastChild; // инициализируем переменную, содержащую последний прямой дочерний узел указанного узла

Возможно вы ожидали, что первый и последний дочерний элемент в этом примере будет соответствовать элементу <p>, но это не так. В обоих случаях, если мы выведем значение переменных в консоль, то значение будет соответствовать #text. Это связано с тем, что текстовый узел вставляется для сохранения пробела между концом открывающих тегов <div> и <p>, и закрывающих тегов </p> и </div>.

Для того, чтобы свойства firstChild и lastChild ссылались на элементы, а не на текстовые узлы, то необходимо размещать HTML код в одну строчку без использования пробелов и переносов, например:

<ul><li>1</li><li>2</li><li>3</li></ul>

В этом случае первый элемент внутри маркированного списка будет соответствовать свойству firstChild, а третий элемент списка свойству lastChild.

Чтобы избежать подобных проблем с текстовыми узлами, или узлами комментариев, то вы можете воспользоваться свойствами firstElementChild и lastElementChild объекта ParentNode, которые позволяют вернуть первый, или последний прямой дочерний узел, который является элементом.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2016 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Node.lastChild

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
lastChild	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓45	✓≤12.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const lastChild = node.lastChild;

Спецификация

DOM Standard.

Пример использования

<ul id="list">
  <li>Первый элемент</li>
  <li>Последний элемент</li>
</ul>

const list = document.getElementById('list')
console.log('Первый узел:', list.firstChild.nodeName)
console.log('Последний узел:', list.lastChild.nodeName)
// Пробелы и переводы строк в HTML тоже создают дочерние текстовые узлы.
for (const node of [list.firstChild, list.lastChild]) {
    if (node.nodeType === Node.ELEMENT_NODE) node.style.border = '2px solid steelblue'
}

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием JavaScript метода querySelectorAll() объекта Document выбираем все элементы <ul> и инициализируем переменную этим значением (объект NodeList). После этого с помощью свойств firstChild и lastChild выбираем первые и последние прямые дочерние узлы маркированных списков, и задаем им определенный стиль для границ.