HTML - DOM NodeList length Property

Quiz

HTML DOM Nodelist length Property is a read-only property which returns the number of items in the nodelist.

Syntax

nodelist.length;

Return Value

It returns an integer representing number of items in the nodelist.

Examples of HTML DOM Nodelist 'length' Property

Here are few examples illustrating use of length property.

Count number of child Elements in body

The following example returns the number of child elements in <body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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 'body' elements</p>
    <button onclick="fun()">Click me</button>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.body.childNodes.length;
            document.getElementById("type").innerHTML =
                "Number of 'body' elements :" + x;
        }
    </script>
</body>
</html>

Count Child Elements of Section Element

The following example returns the number of child elements in <section>.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist length Property</title>
</head>
<body>
    <section id="sec">
        <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 elements in
        <section>
            </p>
        </section>
        <button onclick="fun()">Click me</button>
        <p id="type"></p>
        <script>
            function fun() {
                let x = document.getElementById("sec").childNodes.length;
                document.getElementById("type").innerHTML = "Number of elements in section :" + x;
            }
        </script>
</body>
</html>

Count the number of h1 Element

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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 Text Style

In the following example, we loop over nodes using length property to change the style of desired elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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