Skip to content
Related Articles

Related Articles

HTMLCollection length Property
  • Last Updated : 13 Oct, 2020

The length() Property is used to return the collection of all HTML elements in a document. It is read-only property and is quite useful when a user wants to loop through an HTML Collection.

Syntax: 

HTMLCollection.length 


Return Value: It returns a number which represent the number of all elements in a HTML Collection.

Below example shows how to count the all <p> element in the html collection: 

Example-1:  



HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>
          HTMLCollection length Property
        </h2>
 
         
<p>
          The length property is used to return the
          number of all elements in a HTMLCollection.
        </p>
 
        <div>
             
<p>GeeksForGeeks</p>
 
             
<p>A Computer science portal for geeks</p>
 
        </div>
 
        <button onclick="Geeks()">Submit</button>
 
        <!-- l is the HTML collection here -->
        <script>
            function Geeks() {
                var l =
                    document.getElementsByTagName("P").length;
                alert(l);
            }
        </script>
  </center>
 
</body>
 
</html>

Output: 
Before clicking on the button: 

After clicking on the button: 

Example-2: To highlight all the elements with class GFG using length property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>HTMLCollection length Property</h2>
 
         
<p>
          The length property is used to return the
          number of all elements in a HTMLCollection.
         </p>
 
        <div>
            <p class="GFG">GeeksForGeeks</p>
 
            <p class="GFG">
              A Computer science portal for geeks
            </p>
 
        </div>
 
        <button onclick="Geeks()">Submit</button>
 
        <!-- w is the HTML collection here -->
        <script>
            function Geeks() {
                var w, c;
 
                w = document.getElementsByClassName("GFG");
                for (c = 0; c < w.length; c++) {
                    w[c].style.backgroundColor = "BLUE";
                }
            }
        </script>
  </center>
 
</body>
 
</html>

Output: 
Before clicking on the button: 
 

After clicking on the button: 
 

Supported Browsers: The browser supported by HTMLCollection length property are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :