The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.


const elementClasses = elementNodeReference.classList;

elementClasses is a DOMTokenList representing the class attribute of elementNodeReference. If the class attribute was not set or is empty elementClasses.length returns 0. element.classList itself is read-only, although you can modify it using the add() and remove() methods.


add( String [, String [, ...]] )
Add specified class values. If these classes already exist in attribute of the element, then they are ignored.
remove( String [, String [, ...]] )
Remove specified class values.
Note: Removing a class that does not exist does NOT throw an error.
item( Number )
Return class value by index in collection.
toggle( String [, force] )
When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.
When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it.
contains( String )
Checks if specified class value exists in class attribute of the element.
replace( oldClass, newClass )
Replaces an existing class with a new class.


const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>

// use the classList API to remove and add classes

// <div class="anotherclass"></div>

// if visible is set remove it, otherwise add it

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );


// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See


Specification Status Comment
HTML Living Standard
The definition of 'Element.classList' in that specification.
Living Standard Note within the HTML specification related to the class attribute.
The definition of 'Element.classList' in that specification.
Living Standard Initial definition
The definition of 'Element.classList' in that specification.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 12 3.6 (1.9.2) 10[1] 11.50 5.1
toggle() method's second argument 24 12 24 (24) No support[2] 15 7
Multiple arguments for add() & remove() 24 12 26 (26) No support 15 7
replace() 61 ? 49 (49) No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 12 1.0 (1.9.2) 10[1] 11.10 5.0
toggle method's second argument 4.4 12 24.0 (24) No support[2] ? 7.0
multiple arguments for add() & remove() 4.4 12 ? No support ? 7.0
replace() No support No support 49 (49) No support No support No support

[1] Not supported for SVG elements.  See a report at Microsoft about that. This is fixed in Edge 16.16299
[2] Internet Explorer never implemented this. See a report at Microsoft about that.

See also