HTML - DOM Element firstElementChild Property

Quiz

The HTML DOM Element firstElementChild property is used to access and retrieve the first child element within a given parent element. The child element refers to those elements that are present within a particular element.

It will not access any text or comment nodes, these will be ignored. If no child element is found within the parent element, it will return null.

Syntax

Following is the syntax of the HTML DOM Element firstElementChild property −

element.firstElementChild;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns the first child element of a particular parent element or returns 'null' if no child elements are present.

Example 1: Accessing the First List Item

The following program demonstrates the usage of the HTML DOM Element firstElementChild property by accessing the first item of the given list (<ul>) −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element firstElementChild</title>
</head>
<body>
<h3>HTML DOM Element firstElementChild Property</h3>
<p>Access and Displays the first child Element..</p>
<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<p id="output"></p>
<script>
   // Accessing the ul element
   const ulEle=document.getElementById('myList');
   //Retrieves the first list item
   const firstListItem = ulEle.firstElementChild;
   // Displaying the text content of the first item
   const outDiv=document.getElementById('output');
   outDiv.textContent = `First list item: ${firstListItem.textContent}`;
</script>
</body>
</html>

The above program retrieves the first child element of a list.

Example 2: Accessing the First Child Element of a Div

Following is another example of the HTML DOM Element firstElementChild property. We use this method to retrieve the first child of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element firstElementChild</title>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>firstElementChild Property</h2>
<p>Click the button to retrieve the first child of a "div" element.</p>
<div id="parent">
   <span>Span Element</span>
   <div>Second Div</div>
   <p>Last Paragraph</p>
</div>
<hr>
<button onclick="retrieveFirstChild()">Retrieve First Child Element</button>
<p id="output"></p>
<script>
   function retrieveFirstChild() {
       const pDiv=document.getElementById('parent');
       const fcele = pDiv.firstElementChild;
       // Displaying the tag name of the first child
       const oD = document.getElementById('output');
       oD.textContent=`First child element tag name: ${fcele.tagName}`;
   }
</script>
</body>
</html>

When the button is clicked, the first child element of the 'div' element will be displayed.

Example 3: Handling Absence of Child Elements

In the example below, we use the firstElementChild property to retrieve the first child element of a form. Since no child elements are present, it will return null −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element firstElementChild</title>
</head>
<body>
<h3>HTML DOM Element firstElementChild Property</h3>
<p>Click the button to retrieve the first Input field</p>
<form id="myForm">
</form>
<p id="output"></p>
<button onclick="getFirstInput()">Get First Input</button>
<script>
   function getFirstInput() {
       var form = document.getElementById("myForm");
       var finp = form.firstElementChild;
       // Displays placeholder of the first input 
       var outdiv = document.getElementById('output');
       outdiv.innerHTML = `<p>First Input Field: ${finp}</p>`;
   }
</script>
</body>
</html>

When the button is clicked, it will display null because there are no child elements within the form.

Supported Browsers

Property
firstElementChild	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page