HTML | DOM children Property

The DOM children property is used to return HTMLcollection of all the child elements of the specified element. The elements in the collection can be accessed by index numbers. It differs from childNodes as childNodes contains all nodes (i.e. it includes text and comment nodes as well) but on the other hand, children contains only element nodes. This is a read-only property.

Syntax:

element.children

Return Value: It returns a collection of element nodes which can be accessed by indexing.



Example 1: This example returns the number of list items.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM children Property
    </title>
  
    <!-- Script to count children of parent attribute -->
    <script>
        function Geeks() {
            var count =
                document.getElementById("parent").children.length;
  
            document.getElementById("p").innerHTML = 
                  "No of Children: " + count;
        }
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>
            DOM children Property
        </h2>
  
    <p>Searching Algorithms</p>
  
    <ul id="parent">
        <li>Merge sort</li>
        <li>Quick sort</li>
    </ul>
  
    <button onclick="Geeks()">
        Click Here!
    </button>
  
    <p id="p"></p>
</body>
  
</html>

chevron_right


Output:
Before click on the button:
children
After click on the button:
children

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM children Property
        </title>
          
        <script>
            function Geeks() {
                var doc = 
                document.getElementById("parent").children;
                  
                var i;
                for(i = 0; i < doc.length; i++) {
                    doc[i].style.color = "white";
                    doc[i].style.backgroundColor = "green";
                }
            }
        </script>
    </head>
      
    <body style = "text-align:center">
          
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            DOM children Property
        </h2>
          
        <div id = "parent">
            <p>
                A computer science portal for geeks.
            </p>
            <p>
                Geeks classes an extensive programme for geeks.
            </p>
        </div>
          
        <button onclick = "Geeks()">Click me!</button>
    </body>
</html>                    

chevron_right


Output:
Before click on the button:
children
After click on the button:
children

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

  • Google Chrome 2.0
  • Internet Explorer 9.0*
  • Firefox 3.5
  • Opera 10.0
  • Apple Safari 4.0


My Personal Notes arrow_drop_up


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.