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(), andcontains(). - 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
Leave Comment