---
title: "Explain the HTML DOMTokenList in JavaScript"
description: "Here's we will learn about HTML DOMTokenList in JavaScript with simple example."
author: "Ashutosh Patel"
published: 2025-02-17
updated: 2025-02-17
canonical: https://www.mindstick.com/blog/305273/explain-the-html-domtokenlist-in-javascript
category: "javascript"
tags: ["javascript", "javascript object"]
reading_time: 4 minutes
---
# Explain the HTML DOMTokenList in JavaScript
**DOMTokenList** is a special object that represents a [collection](https://www.mindstick.com/articles/1718/collections-in-java) 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](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) of the HTML element.
```html
DOMTokenList Example
Thi is the Para 1.
Thi is the Div 2.
Thi is the Div 3.
```
#### Properties of DOMTokenList
- `.length`– Returns the number of tokens (classes) in the list.
```html
DOMTokenList Example
Thi is the Para 1.
Thi is the Div 2.
Thi is the Div 3.
```
- **Access by index** - Get a specific [class name](https://www.mindstick.com/forum/12871/how-to-get-class-name) using the index.
```html
DOMTokenList Example
Thi is the Para 1.
Thi is the Div 2.
Thi is the Div 3.
```
#### Methods of DOMTokenList
here are several DOMTokenList [methods](https://www.mindstick.com/articles/13060/runny-nose-remedy-methods-that-work-best) are given below,
`add()` **– Add a Class**
It adds one or more classes to an element.
```html
DOMTokenList Example
Thi is the Para 1.
Thi is the Div 2.
Thi is the Div 3.
```
`remove()` **– Remove a Class**
It removes one or more classes.
```html
DOMTokenList Example
This is the Para 1.
This is the Div 2.
This is the Div 3.
```
`toggle()` **– Toggle a Class**
- If the class doesn't exist then it adds it, if it exists then it removes it.
```html
DOMTokenList Example
This is the Para 1.
This is the Div 2.
This is the Div 3.
```
- Pass **true** or **false** to force addition or [removal](https://www.mindstick.com/articles/13061/laser-tattoo-removal)
```javascript
element.classList.toggle("active", true); // Always adds "active" element.classList.toggle("active", false); // Always removes "active"
```
`contains()` **– [Check if](https://www.mindstick.com/forum/12878/how-to-check-if-an-asp-dot-net-file-upload-control-has-a-file-in-jquery) a Class Exists**
It returns `true` if the class is present in the class list.
```javascript
DOMTokenList Example
This is the Para 1.
This is the Div 2.
This is the Div 3.
```
`replace()` **– [Replace](https://yourviews.mindstick.com/view/81330/cow-antibody-research-in-usa-a-step-ahead-to-replace-plasma-therapy) a Class**
```javascript
DOMTokenList Example
This is the Para 1.
This is the Div 2.
This is the Div 3.
```
#### Example: DOMTokenList in Action
```javascript
DOMTokenList Example