blog

home / developersection / blogs / explain the html domtokenlist in javascript

Explain the HTML DOMTokenList in JavaScript

Explain the HTML DOMTokenList in JavaScript

Ashutosh Kumar Verma 300 17-Feb-2025

DOMTokenList is a special object that represents a collection of space-separated tokens, typically used to handle CSS classes on an element. It allows you to efficiently add, remove, toggle, and check classes.

 

How to Get a DOMTokenList?

The DOMTokenList is normally accessed through the .classList property of the HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center">  
 <p class="item">Thi is the Para 1.</p>
 <p class="item">Thi is the Div 2.</p>
 <p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList); // DOMTokenList of all classes
</script>
</body>
</html>

 

Properties of DOMTokenList

  • .length – Returns the number of tokens (classes) in the list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center">  
 <p class="item">Thi is the Para 1.</p>
 <p class="item">Thi is the Div 2.</p>
 <p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList.length); // Number of all classes
</script>
</body>
</html>

 

  • Access by index - Get a specific class name using the index.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center">  
 <p class="item">Thi is the Para 1.</p>
 <p class="item">Thi is the Div 2.</p>
 <p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList[0]); // first class in the list
</script>
</body>
</html>

 

Methods of DOMTokenList

here are several DOMTokenList methods are given below,

add() – Add a Class

It adds one or more classes to an element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center">  
 <p class="item">Thi is the Para 1.</p>
 <p class="item">Thi is the Div 2.</p>
 <p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList.length); // 2
element.classList.add("new-class", "another-class");
console.log(element.classList.length); // 4
</script>
</body>
</html>

 

remove() – Remove a Class

It removes one or more classes.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center old-class">  
 <p class="item">This is the Para 1.</p>
 <p class="item">This is the Div 2.</p>
 <p class="item">This is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList.length); // 3
element.classList.remove("old-class");
console.log(element.classList.length); // 2
</script>
</body>
</html>

 

toggle() – Toggle a Class

  • If the class doesn't exist then it adds it, if it exists then it removes it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center">  
 <p class="item">This is the Para 1.</p>
 <p class="item">This is the Div 2.</p>
 <p class="item">This is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
element.classList.toggle("highlight"); // Add if missing, remove if present
</script>
</body>
</html>

 

  • Pass true or false to force addition or removal
element.classList.toggle("active", true); // Always adds "active" element.classList.toggle("active", false); // Always removes "active"

 

contains() – Check if a Class Exists

It returns true if the class is present in the class list.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center active">  
 <p class="item">This is the Para 1.</p>
 <p class="item">This is the Div 2.</p>
 <p class="item">This is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
console.log(element.classList.contains("active"));// return true if exist
</script>
</body>
</html>

 

replace() – Replace a Class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
</head>
<body>
<div id="myDiv" class="container justify-content-center active">  
 <p class="item">This is the Para 1.</p>
 <p class="item">This is the Div 2.</p>
 <p class="item">This is the Div 3.</p>
</div>
<script type="text/javascript">

let element = document.getElementById("myDiv");
element.classList.replace("active", "selected");// replace 'active' by 'selected'
</script>
</body>
</html>

 

 

Example: DOMTokenList in Action

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>DOMTokenList Example</title>
<style>
       .highlight { color: red; font-weight: bold; }
   </style>
</head>
<body>
<p id="myDiv" class="active">This is the Para 1.</p>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<script>

function toggleHighlight() {
           let text = document.getElementById("myDiv");
           text.classList.toggle("highlight");
       }
</script>
</body>
</html>

 

Summary

  • DOMTokenList makes it easy to manipulate the class with methods like add(), remove(), toggle(), and contains().
  • It is a live collection, meaning it updates when the class list changes.
  • Use it for dynamic styling and interactive UI effects.

 

Also, Read:  Explain the HTML DOM NodeList in JavaScript

 


Updated 17-Feb-2025

Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Leave Comment

Comments

Liked By