/Web APIs

Node: firstChild property

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.


A Node, or null if there are none.


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


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

  const p01 = document.getElementById("para-01");

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.


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

  const p01 = document.getElementById("para-01");

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.


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
firstChild 1 12 1 6 ≤12.1 1 4.4 18 4 ≤12.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.