HTMLCollection length Property

Last Updated : 10 Aug, 2022

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>