HTML | DOM firstChild Property

The DOM firstChild Property is used to return the firstchild Node of its parent node element. It is read-only property and does not return a text node and a comment node.

Syntax:

node.firstChild 

Return Value: It returns a string value which represent the first child of a node. If the element does not have a child node then it returns a null value.

Note: Whitespace inside the parent elements is considered as text, and text is considered as nodes.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body style="margin-left:140px;">
    <h1>GeeksForGeeks</h1>
    <h2>DOM firstChild Property </h2>
  
    <p>List of sorting::</p>
    <ul id="GFG"><li>Merge Sort</li>
    <li>Quick Sort</li>
    <li>Selection Sort</li>
    <li>Bubble Sort</li>
    </ul>
    <button onclick="Geeks()">Submit</button>
    <p id="sudo"></p>
    <script>
        function Geeks() {
            var x = 
            document.getElementById("GFG").firstChild.innerHTML;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking on the Button:

After clicking on the button:

Example-2:

To get the node name of the first child-

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color: green;
            }
              
            #GFG {
                font-size: 20px;
            }
        </style>
    </head>
      
    <body style="margin-left:140px;">
        <h1>GeeksForGeeks</h1>
        <h2>DOM firstChild Property </h2>
        <div id="GFG"><p>first Node</p><span>Second Node</span>
            <p>ThirdNode</p>
        </div>
        <br>
        <button onclick="Geeks()">Submit</button>
      
        <p id="sudo" style="font-size:25PX;"></p>
      
        <script>
            function Geeks() {
                var x = 
                document.getElementById("GFG").firstChild.nodeName;
                document.getElementById("sudo").innerHTML = 
                "node name of the first child node "
                + "of a <div> element:" + x;
            }
        </script>
    </body>
</html>                    

chevron_right


Output:
Before clicking on the button:

After clicking on the button:

Supported Browsers: The browser supported by DOM firstChild property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.