HTML DOM Element firstChild
Example
Return the HTML content of the first child node of an <ul> element:
Get the text of the first child node of a <select> element:
More examples below.
Description
ThefirstChild property returns the first child node of a node.
ThefirstChild property returns a node object.
ThefirstChild property is read-only.
ThefirstChild property is the same aschildNodes[0].
Important!
firstChild returns the first childnode: An element node, a text node, or a comment node.
Whitespace between elements are also text nodes.
Alternative:
The firstElementChild Property
ThefirstElementChild property returns the first childelement (ignores text and comment nodes).
See Also:
Node Properties
Nodes vs Elements
In the HTML DOM terminology:
Nodes are all nodes (element nodes, text nodes, and comment nodes).
Whitespace between elements are also text nodes.
Elements are only element nodes.
childNodes vs children
childNodes returns childnodes (element nodes, text nodes, and comment nodes).
children returns childelements (not text and comment nodes).
firstChild vs firstElementChild
firstChild returns the first childnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
firstElementChild returns the first childelement (not text and comment nodes).
lastChild vs lastElementChild
lastChild returns the last childnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
lastElementChild returns the last childelement (not text and comment nodes).
Syntax
Return Value
| Type | Description |
| Node | The first child of a node.nullif no child exists. |
More Examples
This example demonstrates how whitespace may interfere.
Try to get the node name of the first child node of "myDIV":
<p>Looks like first child</p>
<p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
However, if you remove the whitespace from the source, there are no #text nodes in "myDIV":
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
Browser Support
element.firstChild is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
