JavaScript Element firstElementChild Property

What You’ll Learn

Element.firstElementChild is a read-only instance property that returns the first child element, or null when none exist. Learn how it differs from firstChild, how it relates to children, and how to use it safely—with five examples and try-it labs.

Introduction

When you need the first nested tag inside a parent—not a text node from whitespace— firstElementChild is the direct read.

It is ideal for grabbing the first list item, table row, or card section without filtering childNodes yourself.

const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);

Understanding the Property

MDN: the read-only firstElementChild property returns the element’s first child element, or null if there is no such child.

• Read-only — re-read after DOM changes to get the current first element.
• Element or null — never returns text or comment nodes.
• Element-only view — same first item as children[0] when present.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

firstElementChild

Value

An Element reference for the first child element, or null when the parent has no element children. Always check for null before reading properties like textContent.

📋 MDN List Example Shape

MDN reads the first list item’s text from a ul:

<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);
// First (1)

Related learning: children, lastElementChild, and firstChild.

Examples Gallery

Examples follow MDN Element: firstElementChild. Labs use simple lists and containers so you can compare element-only reads safely.

const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);

First (1)

const box = document.getElementById("box");
console.log({
  firstChildType: box.firstChild.nodeName,
  firstElementChildTag: box.firstElementChild.tagName
});

{
  "firstChildType": "#text",
  "firstElementChildTag": "SPAN"
}

const empty = document.getElementById("empty");
console.log(empty.firstElementChild); // null
console.log(empty.firstChild !== null); // may still have a text node

null
true

const box = document.getElementById("box");
console.log(box.firstElementChild === box.children[0]); // true
console.log(box.firstElementChild.tagName); // P

true
P

console.log({
  supported: "firstElementChild" in Element.prototype,
  returns: "Element or null",
  tip: "Check for null before reading properties",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "Element or null",
  "tip": "Check for null before reading properties",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Reading the first row, list item, or tab panel element.
• Skipping whitespace text nodes that firstChild would return.
• Empty-state checks when no element children exist (null).
• Quick access instead of children[0] with clearer intent.
• Pairing with lastElementChild for first/last element reads.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns null, not undefined, when no element children exist.
• From the ParentNode mixin—also on Document and DocumentFragment.
• Related: elementTiming, children, lastElementChild, id, JavaScript hub.

💡 Best Practices