First and last child node of a specific node in JavaScript?

Javascript Web Development Front End Technology

In this article we are going to learn about the first and last child node of a specific node in JavaScript along with suitable examples.

To get the first and last child node of a specific node, there are existing properties called firstChild, lastChild, firstElementChild and lastElementChild.

The difference between the property of firstChild and firstElementChild is that in contrast to firstElementChild, firstChild treats both text and comments contained within html elements as children. The firstChild also considers the whitespace in the text. The same is applicable for lastChild and lastElementChild.

To get the first child of a list

The syntax to get the first child of a list is −

Node.firstChild;
Or
Node.firstElementChild;

Where, Node can be any HTML element which can be accessed using id name or class name. The first child of a specific node is returned.

Example 1

This is a program to get the first and last child node of a specific node in JavaScript using firstChild and firstElementChild property. The difference between both firstChild and firstElementChild is illustrated.

In the ul list with id “car-list”, if we place comments before the first element and white spaces between each list item, then when we access the first child using firstChild property, it returns undefined. So, avoid whitespaces when using firstChild property and the firstElementChild is always preferred. The same is applicable for lastChild and lastElementChild.

<!DOCTYPE html>
<html>
<head>
   <title>A program to get the first child node of a specific node in JavaScript</title>
</head>
<body style="text-align: center ;">
   <p> A program to get the first and last child node of a specific node in JavaScript using firstChild and firstElementChild property.</p>
   <ul id="car-list">
      <li>BMW</li>
      <li>AUDI</li>
      <li>RANGE ROVER</li>
      <li>ROLLS ROYCE</li>//These are the top branded cars
   </ul>
   <ul id="top-selling-mobiles">
      //Top selling mobiles
      <li>iPhone</li>
      <li>Samsung</li>
      <li>One plus</li>
   </ul>
   <p id="first-last"></p>
   <script>
      let first_child = document.getElementById('car-list').firstChild.innerHTML;
      let first_element_child = document.getElementById('top-selling-mobiles').firstElementChild.innerHTML;
      document.getElementById('first-last').innerHTML = 'First child for the list "car-list" : '+first_child + '<br/>' + 'First Element child for the list "top-selling mobile" : '+first_element_child;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

To get the last child of a list

The syntax to get the last child of a list is −

Node.lastChild;
Or
Node.lastElementChild;

Where, Node can be any HTML element which can be accessed using id name or class name. The last child of a specific node is returned.

Example 2

This is a program to get the first and last child node of a specific node in JavaScript using lastChild and lastElementChild property. The difference between both lastChild and lastElementChild is illustrated.

<!DOCTYPE html>
<html>
<head>
   <title>A program to get the first child node of a specific node in JavaScript</title>
</head>
<body style="text-align: center ;">
   <p> A program to get the first and last child node of a specific node in JavaScript using lastChild and lastElementChild property.</p>
   <ul id="car-list">
      //Top Branded Cars<li>BMW</li>
      <li>AUDI</li>
      <li>RANGE ROVER</li>
      <li>ROLLS ROYCE</li>
   </ul>
   <ul id="top-selling-mobiles">
      //Top selling mobiles
      <li>iPhone</li>
      <li>Samsung</li>
      <li>One plus</li>
   </ul>
   <p id="last"></p>
   <script>
      let last_child = document.getElementById('car-list').lastChild.innerHTML;
      let last_element_child = document.getElementById('top-selling-mobiles').lastElementChild.innerHTML;
      document.getElementById('last').innerHTML = 'Last child for the list "car-list" : '+last_child + '<br/>' + 'Last Element child for the list "top-selling mobile" : '+last_element_child;
   </script>
</body>
</html>

On executing the above code, the below output is generated.