element.classList

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.

Syntax

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.

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.

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.

Examples

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

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

alert(div.classList.contains("foo"));

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

Specifications

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

Browser compatibility

[1] Not supported for SVG elements. See a report at Microsoft about that.
[2] Internet Explorer never implemented this. See a report at Microsoft about that.

See also

• element.className
• DOMTokenList