HTML - DOM HTMLCollection length Property

Quiz

HTML DOM HTMLCollection length property returns the number of elements in an HTMLCollection. It is a read-only property and very useful property as it works as iterator while using loop.

Syntax

HTMLCollection.length;

Return Value

It returns a number which represents number of elements in HTMLCollection.

Examples of HTML DOM HTMLCollection 'length' Property

Here are few examples illustrating use of length property.

Count Number of Elements

The following example returns the number of 'h1' elements present in the document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection length Property</title>
</head>
<body>
    <h1>This is a learning domain</h1>
    <h1>Welcome to Tutorials Point</h1>
    <h1>Welcome to Tutorix</h1>
    <p>Click below to get the number of 'h1' elements</p>
    <button onclick="fun()">Click me</button>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("h1").length;
            document.getElementById("type").innerHTML =
                "Number of 'h1' elements :" + x;
        }
    </script>
</body>
</html>

Change the Background Color

In the following example length property is used as an iterator to change the background color of elements with classname = 'change'.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection length Property</title>
</head>
<body>
    <p>Click below to change background color of p element with class name = change</p>
    <button onclick="fun()">Click me</button>
    <P class="change">This is a learning domain</p>
    <p>Welcome to Tutorials Point</p>
    <p class="change">Welcome to Tutorix</p>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("change");
            for (let i = 0; i < x.length; i++) {
                x[i].style.backgroundColor = "#04af2f";
            }
        }
    </script>
</body>
</html>

Supported Browsers

Property
length	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page