Apr 18, 2022
The firstChild
property contains the first child DOM node of a DOM node, which could be of type text
, comment
, or element
.
For example, the below code changes the text in the first <li>
element from "Gas" to "Water".
<ul id="example"><li>Gas</li><li>Food</li></ul>
<script>
const list = document.querySelector('#example');
list.firstChild.innerHTML = 'Water';
</script>
Whitespace matters when using firstChild
!
The below example does not work as expected, because firstChild
returns a text node containing the whitespace between <ul id="example">
and the first <li>
<ul id="example">
<li>Gas</li>
<li>Food</li>
</ul>
<script>
const list = document.querySelector('#example');
// `firstChild` below is a text node containing whitespace, **not** the first `<li>`
list.firstChild.innerHTML = 'Water';
</script>
You can use the firstElementChild
property to avoid this issue, and get the first DOM element node, ignoring text nodes.
<ul id="firstElemChild">
<li>Gas</li>
<li>Food</li>
</ul>
<script>
const elem = document.querySelector('#firstElemChild');
elem.firstElementChild.innerHTML = 'Water';
</script>
If the DOM node has no children, firstChild
contains null
.
<div id="example1"></div>
<script>
console.log(document.querySelector('#example1').firstChild);
</script>
More Fundamentals Tutorials