HTML DOM firstChild Property
Element ObjectExample
Get the HTML content of the first child node of an <ul> element:
The result of x will be:
More "Try it Yourself" examples below.
Definition and Usage
The firstChild property returns the first child node of the specified node, as a Node object.
The difference between this property and firstElementChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).
Note: Whitespace inside elements is considered as text, and text is considered as nodes (See "More Examples").
This property is read-only.
Tip: Use the element.childNodes property to return any child node of a specified node. childNodes[0] will produce the same result as firstChild.
Tip: To return the last child node of a specified node, use the lastChild property.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Syntax
Technical Details
| Return Value: | A Node object, representing the first child of a node, or null if there are no child nodes |
|---|---|
| DOM Version | Core Level 1 Node Object |
More Examples
Example
In this example, we demonstrate how whitespace may interfare with this property.
Get the node name of the first child node of a <div> element:
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
The result of x will be:
Example
However, if we remove the whitespace from the source, there are no #text nodes in <div>, which will make the <p> element the first child node:
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
The result of x will be:
Example
Get the text of the first child node of a <select> element:
The result of x will be:
Related Pages
HTML DOM reference: node.lastChild Property
HTML DOM reference: node.childNodes Property
HTML DOM reference: node.parentNode Property
HTML DOM reference: node.nextSibling Property
HTML DOM reference: node.previousSibling Property
HTML DOM reference: node.nodeName Property
