Document.lastElementChild is a read-only instance property that returns the document’s last child Element, or null. For HTML this is usually the root <html> element. Learn how it differs from lastChild and documentElement, plus five examples with try-it labs.
Read-only
Element | null
Usually <html>
lastChild
firstElementChild
Baseline widely
The Document node can have a doctype, comments, and element children. When you need the last element child only, use document.lastElementChild.
MDN: for HTML documents this is usually the only child element—the root <html>. For the last element inside a specific tag (like the last <li> in a list), use Element.lastElementChild instead.
On typical HTML pages, firstElementChild and lastElementChild both refer to the same <html> node because it is the document’s only element child.
Related Document tutorials: firstElementChild, documentElement, children, Document constructor.
Document.lastElementChildA read-only instance property from the ParentNode interface, available on Document and Element.
Element, or null if none (MDN).<html> (MDN).element.lastElementChild for nested trees.document.lastElementChildThe root <html> element on typical HTML documents (MDN), or null when there are no element children.
document.lastElementChild;
// returns the root <html> element, the only child of the document| Goal | Code / note |
|---|---|
| Last element under document | document.lastElementChild |
| Root html (preferred name) | document.documentElement |
| Tag name check | document.lastElementChild.tagName → "HTML" |
| Same as documentElement? | === document.documentElement |
| Last child of a list | ul.lastElementChild |
| MDN status | Baseline Widely available |
Four facts about document.lastElementChild.
Element | nullRead-only
<html>Usually
non-elementsDoctype etc.
baselineStandard API
lastChild vs lastElementChilddocument.lastChild | document.lastElementChild | |
|---|---|---|
| Node kinds | Any (element, text, comment, doctype) | Elements only |
| Typical HTML page | Often <html> (last node) | <html> |
Safe for .tagName? | Only when node is an Element | Yes when not null |
| Beginner tip | Check nodeType first | Prefer for element work |
Examples follow MDN Document: lastElementChild. Use View Output or Try It Yourself for each case.
Get the document’s last element child and compare sibling APIs.
<html> ElementOn a normal HTML page, the last element child is usually <html>.
const root = document.lastElementChild;
console.log(root.tagName); // "HTML"
console.log(root === document.documentElement); // trueMDN: returns the root <html> element — the only element child of the document on typical HTML pages.
lastChild vs lastElementChildCompare the last node of any type with the last element only.
const anyNode = document.lastChild;
const lastEl = document.lastElementChild;
console.log("lastChild nodeType:", anyNode && anyNode.nodeType);
console.log("lastChild tagName?:", anyNode && anyNode.tagName);
console.log("lastElementChild:", lastEl && lastEl.tagName);On many pages lastChild is also <html>, but lastElementChild guarantees an Element (or null).
Same-object checks and the Element-level twin.
firstElementChild vs lastElementChildOn HTML with one root element, both point to the same node.
console.log(
document.firstElementChild === document.lastElementChild
); // true when only one element child
console.log(document.lastElementChild.tagName);When the document has multiple element children (unusual), first and last differ. HTML pages usually have just one.
documentElement?Confirm the last element child is the document root.
console.log(
document.lastElementChild === document.documentElement
); // true on typical HTML documents
console.log(document.documentElement.lang || "(no lang)");Prefer document.documentElement in app code when your intent is “the document root.”
Element.lastElementChild (Last <li>)MDN: use Element.lastElementChild for children inside the tree.
const list = document.querySelector("ul");
const lastItem = list.lastElementChild;
console.log(lastItem.textContent); // last <li> textSame ParentNode API at document level and element level — only the starting node changes.
<html> without a selector (usually same as documentElement).firstElementChild / nextElementSibling.ul.lastElementChild for the last item.null.lastElementChild Is ChosenDoctype, comments, and the <html> element may all exist.
Skips non-element nodes until it finds the last Element child.
Returns that Element or null (MDN).
Usually matches document.documentElement and often firstElementChild too.
Document.lastElementChild is marked Baseline Widely available on MDN (since April 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only last child Element of the document — usually the root html element.
Bottom line: Use lastElementChild when you need the last element child. On HTML pages it is usually document.documentElement.
Document.lastElementChild returns the last element child of the document — on HTML pages, that is almost always <html>. Pair it with firstElementChild, prefer document.documentElement for the root by name, and use Element.lastElementChild inside the tree.
Continue with lastModified, firstElementChild, documentElement, or the JavaScript hub.
lastElementChild when you need the last Element child.tagName or attributesdocument.documentElement for the html rootelement.lastElementChild for lists and containersfirstElementChild when debugging tree shapelastChild is always an ElementlastElementChild — it is read-onlydocument.lastElementChildLast element child at the document level.
Element | null
API<html>
UsuallylastChild
Elements onlyfirstElementChild
Same on HTMLElement API
Last lilastElementChild and nextElementSibling / previousElementSibling are all part of the same ParentNode family — they skip text nodes and comments so you stay in “element land” while walking the DOM.
Learn when the current document was last modified.
6 people found this page helpful