HTML - DOMTokenList item() Method

Quiz

HTML DOMTokenList item() method returns a token from tokenlist specified by the index in the parameter.

Syntax

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

Parameter

This parameter accepts a single parameter as listed below.

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

Return Value

It returns the token at specified index in the parameter. Tokens are stroed in the list as they appear in the document and returns null if index is out of bound.

Examples of HTML DOMTokenList 'item()' Method

Following example illustrates to get tokens at any specific index using item() method.

Get Token at any Index

The following example returns token at first index using item(index) method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOMTokenList item() Method
    </title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
        .align {
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Hii..</p>
    <p id="add" class="color font align">
        Welcome to Tutorials Point...
    </p>
    <button onclick="fun()">Click me</button>
    <p>Token at specified index is :</p>
    <p id="token"></p>
    <script>
        function fun() {
            let x = document.getElementById("add").classList.item(0);
            document.getElementById("token").innerHTML = x;
        }
    </script>
</body>
</html>

Alternate Method to Get Token at any Index

The following example returns token at first index using [index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOMTokenList add() Method
    </title>
    <style>
        .color {
            background-color: #04af2f;
            color: white;
        }
        .font {
            font-size: 40px;
        }
        .align {
            text-align: center;
        }
    </style>
</head>
<body>
    <p id="add" class="color font align">
        Welcome to Tutorials Point...
    </p>
    <button onclick="fun()">Click me</button>
    <p>Token at specified index is :</p>
    <p id="token"></p>
    <script>
        function fun() {
            let x = document.getElementById("add").classList[0];
            document.getElementById("token").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Method
item()	Yes 8	Yes 12	Yes 3.6	Yes 5.1	Yes 12.1

html_dom.htm

Print Page