Over a million developers have joined DZone.

Quick Tip – HTML5 classList Element Property

DZone's Guide to

Quick Tip – HTML5 classList Element Property

· Web Dev Zone
Free Resource

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Quick Tip – HTML5 classList Element PropertyWhen we want to change the style or display of an HTML element most of the time we update its class name. The main way to change the class name is using the element’s className property. This raises a little problem. The className property is string based and can get a string value of one or more classes. When we want to toggle/update a class name and we have more than one class set to an element that means we will have to do string manipulation. String manipulations can be cumbersome and can affect the performance of the operation.

Not anymore… HTML5 introduces the classList property for HTML elements and it can help to avoid the string manipulation problem.

The classList Property

Each HTML element holds a new classList property. The classList holds an instance of DOMTokenList,which is a new list type that includes a set of space-separated tokens. The DOMTokenList has the following API:

  • length – a property for the length of the list.
  • item(index) – a function that returns the list item that exists in the given index.
  • contains(token) – a function that returns true if the list contains the given token. Else it returns false.
  • add(token) – a function to add a given new token to the list.
  • remove(token) – a function to remove a given token from the list.
  • toggle(token) – a function that adds the token to the list if it doesn’t exist. If the token exists it is removed from the list.

The classList property is read-only and in order to manipulate it you must use the previous DOMTokenList API.

Here are some examples of using the classList property and the DOMTokenList API:

// Adds a red class to a div element
// Removes a blue class from a div element
// If the visible class is set on the element it will be removed.
// Else the visible class will be added to the div
// Will output to the console 'true' if the visible class exists. 
// Else it will output 'false'
classList Support in Browsers

As in all HTML5 new features, not all the browsers support the classList property. To see if you can use the classList property, you can visit the can I use website.


HTML5 classList property can help you avoid string manipulations on the className property. It is using a new list type, the DOMTokenList, in order to expose its functionality.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.


Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}