HTML DOM firstElementChild Property

Last Updated : 15 Jun, 2023

The HTML DOM firstElementChild Property will return the first child of any node PreRequisites DOM (Document Object Model)

Parameters: No parameters are required.

Return value: The values returned by firstElementChild property are the following:

A Node object: Representing the first child element of an element.
Null: If there are no child elements.

Syntax

node.firstElementChild()

Example: In this example, we will use HTML DOM firstElementChild Property.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM firstElementChild Property
    </title>
</head>
 
<body>
    <p>GeeksForGeeksTopics</p>
    <ul id="Sections">
        <li>Array</li>
        <li>LinkedList</li>
        <li>Stack</li>
        <li>Queue</li>
        <li>Tree</li>
        <li>Graph</li>
    </ul>
    <p>
        Click the button to get the first child
        of the node having id is "Sections".
    </p>
   
    <!--button is used to run example function-->
    <button onclick="example()">Click</button>
    <p id="GeeksForGeeks sections first node"></p>
   
    <script>
        // JavaScript code to get the node whose
        // id is "Section"
        function example() {
           
            // x is used to store the element
            // whose id is "Sections".
            let x = document.getElementById("Sections")
                    .firstElementChild.innerHTML;
            document.getElementById("GeeksForGeeks sections" +
                " first node").innerHTML = x;
        }
    </script>
</body>
   
</html>