HTML - DOM HTMLCollection item() Method

Quiz

HTML DOM HTMLCollection item() method returns the element from the HTMLCollection located at specified index in parameter.

Syntax

HTMLCollection.item(index);
// or
HTMLCollection[index];

Parameter

This method accepts a single parameter as listed bwlo.

Parameter	Description
index	It represents index to be returned. 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 HTMLCollection 'item()' Method

The following examples illustrates different uses of HTMLCollection item() method.

Get Content of the First Script Element

In this example, we will get the content of first script element using item() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection item() Method</title>
</head>
<body>
    <script>document.getElementById("s1").innerHTML = "First Script."</script>
    <script>document.getElementById("s2").innerHTML = "Second Script."</script>
    <script>document.getElementById("s3").innerHTML = "Third Script."</script>
    <p>Click to get content of first script element.</p>
    <button onclick="fun()">Click me</button>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts.item(0).text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Alternate method to Get Content of First Script Element

In this example we have used alternate method for the above example using HTMLCollection[index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection item() Method</title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = "This is second Script."
    </script>
    <script>
        document.getElementById("s3").innerHTML = "This is third Script."
    </script>
    <p>Click to get content of first script element.</p>
    <button onclick="fun()">Click me</button>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts[0].text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

Change the Paragraph Style

In the following example we have changed the text background color of first paragraph to green and rest to red and font color to white.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection 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_htmlcollection_reference.htm

Print Page