Course recommendation:

HTML DOM Element firstChild property

firstChild Definition and usage

firstChild The property returns the first child of the specified node as a Node object.

firstChild The property is read-only. childNodes[0] Same.

Note

firstChild Returns the first child node: element node, text node, or comment node.

Whitespace between elements is also a text node.

Alternative:

firstElementChild property - firstElementChild The property returns the first child element (ignoring text and comment nodes).

See also:

childNodes property

lastChild property

nextSibling property

previousSibling property

Node properties

parentNode property

nodeName property

nodeType property

nodeValue property

Instance

Example 1

Return the HTML content of the first child of the <ul> element:

document.getElementById("myList").firstChild.innerHTML;

Try it yourself

Example 2

Get the text of the first child of the <select> element:

let text = document.getElementById("mySelect").firstChild.text;

Try it yourself

Example 3

This example demonstrates the interference of spaces.

Attempt to get the node name of the first child of the element with id "myDIV":

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Try it yourself

Example 4

However, if you remove the spaces from the source, there is no #text node in "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Try it yourself

HTML nodes and elements

In HTML DOMIn the (Document Object Model), an HTML document is a collection of nodes that have (or do not have) child nodes.

NodeIs an element node, text node, and comment node.

ElementThe whitespace between them is also a text node.

Elements are just element nodes.

Child nodes vs. child elements

childNodes ReturnsChild nodes(Element nodes, text nodes, and comment nodes).

children ReturnsChild elementsReturns (not text and comment nodes).

firstChild vs. firstElementChild

firstChild Returns the firstChild nodes(Element nodes, text nodes, or comment nodes). The whitespace between elements is also a text node.

firstElementChild Returns the firstChild elementsDoes not return text nodes and comment nodes.)

lastChild vs. lastElementChild

lastChild Returns the last oneChild nodes(Element nodes, text nodes, or comment nodes). The whitespace between elements is also a text node.

lastElementChild Returns the last oneChild elementsDoes not return text nodes and comment nodes.)

Syntax

element.firstChild

or

node.firstChild

Return value

Type Description
Node

The first child node of the node.

Returns null if there are no children.

Browser support

element.firstChild It is a DOM Level 1 (1998) feature.

All browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support