With the **classList** property of a DOM element, we can add, remove, check, and toggle an element's class in JavaScript. 

# Print the classes of a DOM element 

The `classList` property of a DOM element returns a `DOMTokenList`, which contains all the classes of the element.

Take a look at the code below:









var element = document.getElementById('parent');

console.log("The available classes in the parent element is");
console.log(element.classList); 
// DOMTokenList(3) ["one", "two", "three", value: "one two three"]

codemirror

console

# Add class to an element

We can use the `add` method to add classes to the element. This is shown below: 



var element = document.getElementById('parent');

// adding single class
console.log("Adding class - four");
element.classList.add("four");

// adding multiple class
console.log("Adding classes - five six");
element.classList.add("five", "six");

// if a class already present then it will not be added
element.classList.add("five"); // no action

console.log("ClassList prresent in parent element after adding classes");
console.log(element.classList); 
// DOMTokenList(3) ["one", "two", "three", value: "one two three"]

The `classList` contains live data, meaning it will automatically update the class when a class is added or removed:




let element = document.getElementById('parent');

let classes = element.classList; 
console.log("data in classes variable", classes);

console.log("Adding class 'two' to the parent element ");
element.classList.add("two");

console.log("data in classes variable", classes);

# Remove the class of an element

We can use the `remove` method to remove classes from an element. Take a look at the following code:


let element = document.getElementById('parent');
console.log("classList Before removing classes", element.classList);

// removing single class
console.log("Removing class four")
element.classList.remove("four");

// removing multiple class
console.log("Removing class five & six ")
element.classList.remove("five", "six");

console.log("classList after removing classes", element.classList);

# Check if a DOM element contains a certain class

To check if there is a class present in a DOM element, we can use the `contains` method, as shown below: 





let element = document.getElementById('parent');
let hasClass = element.classList.contains("four"); //true
console.log("Is Four prersent in parent =" + hasClass);

hasClass = element.classList.contains("meow"); //false
console.log("Is meow prersent in parent =" + hasClass);

# Toggle a class 

To toggle a class, we can use the `toggle` method. The `toggle` method will:
*  Add the class if the class is not present in the element. 
*  Remove the class if the class is present in the element.

The `toggle` method returns true if the class is added, and false if the class is removed.





let element = document.getElementById('parent');


element.classList.toggle("show"); // "show" class will be added

console.log("ClassList Before toggling show class");
console.log(element.classList);


element.classList.toggle("show"); // removes "show" class 
console.log("ClassList After toggling show class");
console.log(element.classList);

# Replace a class 

To replace an existing class, we can use the `replace` method. 
The `replace` method returns true if the class was successfully replaced; otherwise, it returns false.


let element = document.getElementById('parent');

console.log("ClassList Before replacing")
console.log(element.classList);

element.classList.replace("hide", "show");
console.log("ClassList After replacing the hide class with show class")
console.log(element.classList);

How to add, remove, toggle class of a DOM element in JavaScript 

Use classList to manage DOM element classes: add(), remove(), contains(), toggle(), and replace().