JavaScript свойство ParentNode.lastElementChild

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

JavaScript свойство lastElementChild объекта ParentNode возвращает последний дочерний элемент (объект Element) конкретного узла, или null, если дочерних элементов нет. Свойство доступно только для чтения.

Если вам необходимо получить первый дочерний элемент (объект Element) конкретного узла, то вы можете воспользоваться свойством firstElementChild.

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

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

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

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

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

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

Совместимостьapi.Element.lastElementChild

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
lastElementChild	✓2	✓12	✓3.5	✓10	✓4	✓18	✓4	✓10.1	✓3	✓1.0	✓4.4	✓3

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

JavaScript синтаксис

const element = node.lastElementChild;

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

DOM Standard.

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

<button data-migration-click-0="">Click me</button>
<div id="myNode">
  Text
  <div>My div</div>
  <p>My paragraph</p>
  Text
  <div>My div 2</div>
  <!--Comment -->
</div>

const setStyles = function () {
    const myNode = document.getElementById('myNode')
    const firstElem = myNode.firstElementChild
    const lastElem = myNode.lastElementChild

    firstElem.style.background = 'yellow'
    lastElem.style.background = 'forestgreen'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    setStyles()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере мы разместили элемент <div>, внутри которого мы разместили два текстовых узла, один узел комментария и три элемента (два элемента <div> и один элемент <p>).

Кроме того, мы разместили в документе кнопку (элемент <button>), которой с помощью метода addEventListener() назначили функцию, которая срабатывает при нажатии. Эта функция при нажатии инициализирует переменную, которая с помощью метода getElementById() находит элемент с глобальным атрибутом id равным значению myNode. С помощью свойств firstElementChild и lastElementChild мы возвращаем первый и последний дочерний элемент (объект Element) узла, содержащегося в переменной myNode и инициализируем переменные этими значениями.

Далее мы устанавливаем свой цвет заднего фона первому и последнему дочернему элементу узла, содержащегося в переменной myNode. Обратите внимание, несмотря на то, что первый прямой дочерний узел указанного узла является текстовым узлом, а последний прямой дочерний узел указанного узла является узлом комментария, были выбраны именно узлы Element.

Если в данном случае использовать свойства firstChild и lastChild объекта Node, то будут выбраны не элементы, а как раз текстовый узел и узел комментария.