JavaScript Element classList Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CLASSLIST

Definition

Element.classList is a read-only property that returns a live DOMTokenList of the element’s class attribute (MDN). Use it to add, remove, toggle, and check class names safely.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.classList. Start with this line.

JavaScript
el.classList
CallWhat it does
el.classListPrimary signature.

Built into the browser. Read or assign el.classList — no import required.

Library declarations
JavaScript
el.classList

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Live DOMTokenList

JavaScript Examples

Example 1 — Add and Remove (MDN)

Swap one class for another without rewriting the whole string.

JavaScript
const div = document.createElement("div");
div.classList.add("foo");
console.log(div.className); // "foo"

div.classList.remove("foo");
div.classList.add("another-class");
console.log(div.className); // "another-class"
Try It Yourself

How It Works

  1. Start empty. A new element has no classes.
  2. add("foo"). The token is inserted into the live list.
  3. remove("foo"). That token is dropped; other classes (if any) stay.
  4. add again. className reflects the updated attribute string.

Example 2 — Toggle and Contains

Flip a class, then force it on or off with the second argument.

JavaScript
const el = document.getElementById("panel");

el.classList.toggle("open");                 // flip
console.log(el.classList.contains("open"));  // true or false

el.classList.toggle("open", true);           // force on
el.classList.toggle("open", false);          // force off
console.log(el.classList.contains("open"));  // false
Try It Yourself

How It Works

  1. toggle without force. Adds the class if missing; removes it if present.
  2. contains. Returns whether that token is currently on the element.
  3. toggle with true. Ensures the class is present (MDN force form).
  4. toggle with false. Ensures the class is absent — useful for state sync.

Example 3 — Replace and Multi-Add

Swap tokens and add several classes in one call.

JavaScript
const el = document.createElement("div");
el.classList.add("foo", "bar");
console.log(el.className); // "foo bar"

el.classList.replace("foo", "baz");
console.log(el.className); // "baz bar"

el.classList.remove("baz", "bar");
console.log(el.classList.length); // 0
Try It Yourself

How It Works

  1. Multi-add. add("foo", "bar") inserts both tokens (MDN).
  2. replace. Swaps foo for baz; bar stays.
  3. Multi-remove. Clears both remaining tokens in one call.
  4. length 0. An empty DOMTokenList means no classes are set.
Compatibility

Browser Support

Element.classList is Baseline Widely available (MDN: across browsers since October 2017).

✓ Baseline · Widely available

Element.classList

Supported in modern Chromium, Firefox, Safari, and Edge. Prefer classList over manual className string edits in new code.

98% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.classList Excellent

Bottom line: Safe for modern web apps. Use add/remove/toggle/replace for clear, bug-resistant class updates.

Frequently Asked Questions

It returns a live DOMTokenList of the element’s class attribute tokens. Use it to add, remove, toggle, check, or replace CSS class names without string parsing.
No. MDN marks Element.classList as Baseline Widely available (since October 2017). It is not Deprecated, Experimental, or Non-standard.
The property itself is read-only (you cannot replace the DOMTokenList object), but you can mutate it with add/remove/toggle/replace, or assign a string which updates classList.value (MDN).
className is the whole class attribute as one space-separated string. classList is a token list API for safer per-class updates.
toggle(token) adds the class if missing and removes it if present. With a second force boolean, it adds when true and removes when false.
Yes. classList.add("a", "b") and classList.remove("a", "b") accept multiple tokens. You can also spread an array: add(...cls).

Next: className

Learn the className property — read and write the entire class attribute as a string.

className tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

24 people found this page helpful

JavaScript Element children Property JavaScript Element className Property