Node: firstChild property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The read-only firstChild property of the Node interface returns the node's first child in the tree, or null if the node has no children.

If the node is a Document, this property returns the first node in the list of its direct children.

Note: This property returns any type of node that is the first child of this one. It may be a Text or a Comment node. If you want to get the first Element that is a child of another element, consider using Element.firstElementChild.

Value

A Node, or null if there are none.

Example

This example demonstrates the use of firstChild and how whitespace nodes might interfere with using this property.

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

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

In the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags. Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.

Another #text node is inserted between the closing </span> and </p> tags.

If this whitespace is removed from the source, the #text nodes are not inserted and the span element becomes the paragraph's first child.

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

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

Now the console will show 'SPAN'.

To avoid the issue with node.firstChild returning #text or #comment nodes, Element.firstElementChild can be used to return only the first element node.

Specifications

Specification
DOM
# ref-for-dom-node-firstchild①

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
firstChild

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also