HTML - DOM firstChild Property

Quiz

The HTML DOM firstChild property is used to access and retrieve the first child node of a specified parent element. In the HTML DOM, an element cannot be considered a parent or child node unless it is compared to other nodes (elements).

For example, an individual <ul> element is not inherently a parent or child element. However, when compared to <li> elements, the "ul" is considered the parent, while the "li" elements are considered its children.

Syntax

Following is the syntax of the HTML DOM firstChild property −

element.firstChild;

Parameters

Since it is a property, it does not accept any parameters.

Return Value

This property returns the first child of a given parent element. If no first child exists it returns 'null'.

Example 1: Accessing the First Child Node of a Div Element

The following program demonstrates how to use the HTML DOM firstChild property to access the first child node of a <div> element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<h4>Displays the first child Node...</h4>
<div id="parent">
<p>This is the first child node.</p>
<p>This is the second child node.</p>
</div>
<div id="otput"></div> 
<script>
   var parent = document.getElementById("parent");
   var firstChild = parent.firstElementChild;  
   function displayResult() {
      var outputDiv=document.getElementById("otput");
      outputDiv.textContent = "First Child Node: " + firstChild.textContent.trim();
   }
   // Call the function to display the result
   displayResult();
</script>
</body>
</html>

The above program accesses and returns the first child node of the "div" (i.e., parent node) element.

Example 2: Handling no child Nodes

Following is another example of the HTML DOM firstChild property. We use this property to check whether the element has any child node or not −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<h4>This example does not have any child nodes...</h4>
<div id="pt"></div>
<div id="output"></div>
<script>
   var parent = document.getElementById("pt");
   var firstChild = parent.firstChild;
   var resultMessage;
   if (firstChild === null) {
      resultMessage="The element has no child nodes.";
   } else {
      resultMessage = firstChild.textContent.trim();
   }
   // Function to display result in output div
   function displayResult() {
      var odiv = document.getElementById("output");
      odiv.textContent = resultMessage;
   }
   displayResult();
</script>
</body>
</html>

Example 3: Displays the first Child Node of Body Element

This example shows the use of the firstChild Property. It retrieves the first child node of the body element, which is a <p> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<p>Displays first child node of body</p>
<h4>Welcome to Tutorialspoint</h4>
<div id="ot"></div>
<script>
   // Selecting the body element
   var bodyElement = document.body;
   // Retrieving and displays the first child node
   var firstChild = bodyElement.firstChild;     
   function displayResult() {
      var otdiv = document.getElementById("ot");
      otdiv.innerHTML = "First Child Node of Body:" + firstChild.nodeName;
   }
   displayResult();
</script>
</body>
</html>

Example 4: Get the first child of ul Element

This example shows how to access the first child node of a<ul>element with the ID "myList" using the firstChild property −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>Retrieving First Child Node HTML</title>
</head>
<body>
<p>Displays HTML content of first child node of "ul" element.</p>
<ul id="myList">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<button onclick="getFirstChild()">Get First Child Node</button>
<div id="ot"></div>
<script>
   function getFirstChild() {
   // Accessing the ul element
   const ul = document.getElementById('myList');
   const firstChildNode = ul.firstChild;
   if(firstChildNode.nodeType === Node.TEXT_NODE){
      const firstChildElement = firstChildNode.nextSibling;
      const otDiv = document.getElementById('ot');
      otDiv.innerHTML = `<p>HTML content of first child node: </p>${firstChildElement.outerHTML}`;
   }
   else{
      const otDiv = document.getElementById('ot');
      otDiv.innerHTML = 'No child node found..!';
   }
  }
</script>
</body>
</html>

Supported Browsers

Property
firstChild	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page