Website is upgrading. We will get back soon with latest updates. Thanks for your kind support.

Search

Suggested keywords:

The firstChild Property in JavaScript

post-title
image

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

You should write because you love the shape of Flow and sentences and the creation of different words on a page.
Social Media

Leave a Reply

Subscribe

to Our Newsletter