JavaScript Node firstChild Property

What You’ll Learn

The Node.firstChild property returns a node’s first child, or null if there are none. Learn the whitespace #text gotcha, firstChild vs firstElementChild, and five practical examples with try-it labs.

Introduction

firstChild is a shortcut for “give me the first entry in childNodes.” It is handy for tree walks and for clearing children with while (node.firstChild) node.removeChild(node.firstChild).

The surprise for beginners: pretty-printed HTML inserts whitespace text nodes, so firstChild is often #text instead of the first tag you see.

Understanding firstChild

MDN: the read-only firstChild property returns the node’s first child in the tree, or null if the node has no children. For a Document, it is the first node in the list of direct children.

• Can be an element, text node, comment, or other node type.
• Whitespace between tags creates #text nodes.
• Same idea as childNodes[0], or null when length is 0.
• Read-only — you do not assign to firstChild.

📝 Syntax

const first = node.firstChild;
if (first) {
  console.log(first.nodeName);
}

Return value

A Node, or null if there are no children.

⚖️ firstChild vs firstElementChild

Examples Gallery

Examples follow MDN Node.firstChild patterns. Use View Output or Try It Yourself for each case.

// <p id="para-01">
//   <span>First span</span>
// </p>

const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName); // "#text"

#text

// <p id="para-01"><span>First span</span></p>

const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName); // "SPAN"

SPAN

const p = document.getElementById("para-01");
console.log(p.firstChild.nodeName);          // often "#text"
console.log(p.firstElementChild.nodeName);   // "SPAN"

#text
SPAN

const empty = document.createElement("div");
console.log(empty.firstChild); // null

if (empty.firstChild) {
  console.log(empty.firstChild.nodeName);
} else {
  console.log("No children");
}

null
No children

const box = document.getElementById("box");

while (box.firstChild) {
  box.removeChild(box.firstChild);
}

console.log(box.firstChild); // null

null

🚀 Common Use Cases

• Empty a container — while (el.firstChild) el.removeChild(el.firstChild).
• Inspect leading text — read a leading text node before the first tag.
• Teach the DOM — show why indented HTML creates #text.
• Prefer elements for UI — switch to firstElementChild for tags.
• Document inspection — look at document.firstChild (often the doctype).

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Whitespace and comments can be the first child.
• Use firstElementChild when you only want elements.
• Related: childNodes, baseURI, JavaScript hub.

💡 Best Practices