firstChild?The read-only firstChild property returns the node’s first child in the tree, or null if there are none (MDN). That child may be an element, text, or comment — not only a tag.
Status: Baseline Widely available (since July 2015) — not Deprecated, Experimental, or Non-standard. Whitespace often makes firstChild a #text node — prefer firstElementChild for the first element.
parent.firstChild
→ first Node in childNodes (or null)
Same idea: parent.childNodes[0]
May be:
Element → "SPAN", "DIV", …
Text → "#text" (common with indented HTML)
Comment → "#comment"
Need first element only?
parent.firstElementChild| Goal | Prefer |
|---|---|
| Any first child node | firstChild |
| First element child | firstElementChild |
| Last child node | lastChild |
firstChildRead it, null-check, then inspect nodeName / nodeType.
parent.firstChild.null, use the node (or compare with firstElementChild).firstElementChild.| Piece | Required? | Role |
|---|---|---|
parent | Yes | Node whose first child you want |
| Return | — | Node or null |
| Writable? | No | Read-only |
child = parent.firstChild
if child is null:
parent has no children
else:
// may be #text because of whitespace
name = child.nodeName
want a tag?
el = parent.firstElementChildKeep these facts handy when reading the first child.
| Topic | Detail |
|---|---|
| Returns | Node or null |
| Equals | childNodes[0] when children exist |
| Whitespace | Often yields #text |
| Elements only | firstElementChild |
| Empty parent | null — check first |
| Standard | Baseline Widely available (since July 2015) |
Compare indented vs compact markup for the same visual content.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Log the first child’s nodeName when it exists.
const box = document.getElementById("box");
const child = box.firstChild;
if (child) {
console.log(child.nodeName);
} else {
console.log("no children");
}null.MDN demo: indented markup inserts a text node first.
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName); // often "#text"<p> and <span>.Skip text/comments when you want the first tag (MDN tip).
const p = document.getElementById("para-01");
console.log(p.firstChild.nodeName);
console.log(p.firstElementChild.nodeName); // "SPAN"#text vs SPAN.Always guard before touching properties on the result.
const empty = document.getElementById("empty");
console.log(empty.firstChild); // null
console.log(empty.hasChildNodes()); // falseClassic clear step: remove firstChild while it exists.
const box = document.getElementById("box");
if (box.firstChild) {
box.removeChild(box.firstChild);
}
console.log(box.firstChild && box.firstChild.nodeName);Check these before treating firstChild as “the first tag.”
MDN: spaces/newlines between tags create a text node that becomes firstChild.
Always null-check before reading nodeName or calling methods on the result.
Use firstElementChild to skip text and comments.
When children exist, firstChild === childNodes[0].
Node.firstChild is marked Baseline Widely available on MDN (since July 2015).
Returns the first child Node or null. May be a text node from whitespace. Prefer firstElementChild for the first element.
Bottom line: Safe everyday DOM API. Null-check, expect #text from pretty HTML, and use firstElementChild for tags. See the MDN firstChild reference.
| Approach | Cost | Best for |
|---|---|---|
firstChild | O(1) | Any first node type |
firstElementChild | O(1) | First element tag |
childNodes[0] | O(1) | Same as firstChild |
Reading either property is cheap. Choose by meaning (any node vs element), not by speed.
null if empty.#text before your first tag.firstElementChild.One line: firstChild is the first node in the child list — frequently whitespace text in pretty HTML.
Learn whether a node is connected to the document.
8 people found this page helpful