HTML - DOM NodeList item() Method

Quiz

HTML DOM NodeList item() method used to get a node from nodelist specified by the index in parameter.

Syntax

nodelist.item(index);
// Or
nodelist[index];

Parameter

This method accepts a single parameter as listed below.

Parameter	Description
index	It represents index of the node in the nodelist which you want to access. Indexing starts from 0.

Return value

It returns the element at specified index and and returns null if index is out of bound.

Examples of HTML DOM Nodelist 'item()' Method

The following example illustrates various implementation of Nodelist item() method.

Get Content of HTML Elements

The following example returns the content of first <p> elements with class name = "example".

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p class="example">
        First Para with example
    </p>
    <p class="example">
        second Para with example
    </p>
    <p class="example">
        Third Para with example
    </p>
    <p class="new">para with new</p>
    <p>
        Click to get content of first p 
        element with class name="example"
    </p>
    <button onclick="fun()">Click me</button>
    <p id="para"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("example").item(0).innerHTML;
            document.getElementById("para").innerHTML = x;
        }
    </script>
</body>
</html>

Alternate way to Get Content of HTML Elements

The following example returns the content of first <p> elements with class name = "example" using nodelist[index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p class="example">
        First Para with example
    </p>
    <p class="example">
        second Para with example
    </p>
    <p class="example">
        Third Para with example
    </p>
    <p class="new">para with new</p>
    <p>
        Click to get content of first p 
        element with class name="example"
    </p>
    <button onclick="fun()">Click me</button>
    <p id="para"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("example")[1].innerHTML;
            document.getElementById("para").innerHTML = x;
        }
    </script>
</body>
</html>

Change the Content of Elements

The following example change the content of the first span element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <span>
        I am span element to be changed.
    </span><br>
    <span>I am constant span.</span>
    <p>
        Click to change the content of first 
        span element.
    </p>
    <button onclick="fun()">Click me</button>
    <script>
        function fun() {
            let x = document.getElementsByTagName("span")
            x.item(0).innerHTML = "Now the content has been changed";
        }
    </script>
</body>
</html>

Change the Style of the Content

In the following example we have changed the background color and font color of the text using nodelist[index] method

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p>
        Click to change the background color
        of following paragraphs.
    </p>
    <button onclick="fun()">Click me</button>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("p");
            for (let i = 0; i < x.length; i++) {
                x[i].style.color = "white";
                x[0].style.backgroundColor = "#04af2f";
                x[i + 1].style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>

Supported Browsers

Method
item()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page