Yogesh Chauhan's Blog

JavaScript: Methods for HTML DOM classList Property

in JavaScript on March 17, 2021

Let’s understand the HTML DOM classList Property first.

HTML DOM classList Property

You can use this property to get class names of an HTML elements. It returns a DOMTokenList object.

classList Property is helpful to set, get, remove or even toggle the class names of an element.

Syntax


let el = document.getElementById('xyz');
let allClasses = el.classList;
//do something with it

To add or remove or do anything else with the classes, we need to get the element first. Here are all the methods we can use to get the HTML element in the DOM.

The HTML DOM classList Property is read-only but there is a way to modify it using the add() and remove() methods.

The classList property does not work in IE9 and earlier versions but we can use className property instead.

Examples

How to add a class to an element?


let el = document.getElementById('xyz');
el.classList.add("class1");

👎 If the class already exists and you still try to add it then it won’t be added again. You must use a different name.

How to add multiple classes to an element?


let el = document.getElementById('xyz');
el.classList.add("class2", "class3");

How to remove a class from an element?


let el = document.getElementById('xyz');
el.classList.remove("class1");

If the class doesn’t exists but you still try to remove it then it won’t give you any error. Your request will be ignored.

How to remove multiple classes from an element?


let el = document.getElementById('xyz');
el.classList.remove("class2", "class3");

How to toggle between two classes for an element?


let el = document.getElementById('xyz');
el.classList.toggle("class4");

How to get class names of an element?


let el = document.getElementById('xyz');
let elClasses = el.classList;
// do something with elClasses

It will return an empty DOMTokenList if there are no classes.

How to get the total number of classes an element has?


let el = document.getElementById('xyz');
let elTotalClasses = el.classList.length;
// do something with elTotalClasses

It will return 0 if there are no classes.

How to get the first class name of an element?


let el = document.getElementById('xyz');
let elFirstClass = el.classList.item(0);
// do something with elFirstClass

ℹ Just change the index in the item() method to get class indexed at another position.

👉 It will return null if the index is out of range.

How to check if an element has a particular class?


let el = document.getElementById('xyz');
let elHasClass = el.classList.classList.contains("abc");;
// will return either true or false


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
@forward rule in SCSS (Sass)SCSSAdd animation to your skills bar using CSSCSSHow to create a full screen loader using CSS and JavaScript?CSSWhat’s the difference between variables in CSS and SCSS (Sass)?CSS12 URLSearchParams methods in JavaScriptJavaScript2 Ways We Can Write Multiple Line Commands in PHPPHP