Element.firstElementChild is a read-only property that returns the parent’s first child Element, or null if there are no child elements (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use el.firstElementChild. Start with this line.
element.firstElementChild| Call | What it does |
|---|---|
element.firstElementChild | Primary signature. |
Built into the browser. Read or assign el.firstElementChild — no import required.
element.firstElementChild| Parameter | Description |
|---|---|
| Parent node | Required. Container that may have element children |
| children | Optional. Live list of all element children |
| Return Value | Description |
|---|---|
| * | Element or null |
Log the text of the first <li> in a list (MDN shape).
const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);
// "First (1)"getElementById("list") returns the <ul>.firstElementChild. It is the first <li>.textContent is "First (1)".null.firstElementChild vs firstChildWhitespace before a child element makes firstChild a text node.
const box = document.getElementById("box");
// <div id="box">\\n <span>Hi</span>\\n</div>
console.log(box.firstChild.nodeName); // "#text"
console.log(box.firstElementChild.tagName); // "SPAN"
console.log(box.firstElementChild.textContent); // "Hi"firstChild sees that text. nodeName is "#text".firstElementChild skips it. You get the <span>.firstElementChild.nullNo element children → null (and children[0] is undefined).
const empty = document.createElement("div");
console.log(empty.firstElementChild); // null
console.log(empty.children[0]); // undefined
empty.textContent = "only text";
console.log(empty.firstElementChild); // nulldiv has no element children → null.children[0]. That is undefined, not null.tagName or textContent.Element.firstElementChild is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.
Read-only first child Element or null — ParentNode mixin, skips text and comments.
Bottom line: Safe for production. Prefer it over firstChild whenever you specifically need an Element child.
Learn how to get and set an element’s unique identifier string.
11 people found this page helpful