Vanilla JavaScript classList
Tags: javascript
Published: 2020-04-28 06:14:32

---
title: Vanilla JavaScript classList
published: true
date: 2020-04-14 03:00:00 UTC
tags: javascript
canonical_url: https://daily-dev-tips.com/posts/vanilla-javascript-classlist/
---
The `Vanilla JavaScript` `classList` is one of the best features to know when working with `JavaScript`, in essence it's a read-only property that returns something we call a `DOMTokenList` this contains the classes on the element we call `classList` on.

## Reading a Elements ClassList with Vanilla JavaScript

To read a `classList` we can use the following markup:

```html
<div class="class-one class-two class-three" id="getMe">Fuu</div>
```

Then for the JavaScript we can use the following code to get all classes.

```js
var element = document.getElementById('getMe');
console.log(element.classList);
// DOMTokenList(3) ["class-one", "class-two", "class-three", value: "class-one class-two class-three"]
```

As you can see it returns a `DOMTokenList` with the three classes in it.

Off-course it's cool to retrieve this, but it doesn't do much, so let's see what makes it awesome 🤩.

## Adding a class to a element

To `add` a element we simply do the following `Vanilla JavaScript` magic.

```js
element.classList.add('class-four');
console.log(element.classList);
// DOMTokenList(4) ["class-one", "class-two", "class-three", "class-four", value: "class-one class-two class-three class-four"]
```

As you can see the element now has a fourth class.

## Removing a class from a element

Removing is basically the same as `add`, but then we use the `remo

```js
element.classList.remove('class-one');
console.log(element.classList);
// DOMTokenList(3) ["class-two", "class-three", "class-four", value: "class-two class-three class-four"]
```

We are removing the class called `class-one` from our element.

## Toggling a class on an element

Sometimes you want to toggle a class on an element, think about making it visible or hidden when you click it. 

We can achieve this with the following code:

```js
element.classList.toggle('visible');
console.log(element.classList);
// DOMTokenList(4) ["class-two", "class-three", "class-four", "visible", value: "class-two class-three class-four visible"]
```

It will add the class `visible` if it doesn't exist and remove it if it already existed.

## Check if an element contains a certain class

If we want to check if our element contains a certain class we can use the following snippet:

```js
console.log(element.classList.contains('visible'));
// true
```

It will return `true` or `false` and we can use this in `if...else` statements.

## Adding and removing multiple classes

The ClassList can even accept a array of classes to be removed or added.

```js
element.classList.remove('class-two', 'class-three', 'class-four');
console.log(element.classList);
// DOMTokenList ["visible", value: "visible"]

element.classList.add('two', 'three', 'four');
// DOMTokenList(4) ["visible", "two", "three", "four", value: "visible two three four"]
```

## Replacing a class

To replace a existing class we can use the following code:

```js
element.classList.replace('four', 'one');
console.log(element.classList);
// DOMTokenList(4) ["visible", "two", "three", "one", value: "visible two three one"]
```

As you can see this can be very useful for making element animate or even show and hide.

I hope you learned something new about the `Vanilla JavaScript` `classList` function, as always feel free to play around with this codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="dyYodyq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript classList">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/dyYodyq">
  Vanilla JavaScript classList</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## Browser Support

The `Vanilla JavaScript` `classList` has good browser support.

IE doesn't know how to handle the multiple classes very well, but we can even [polyfill](https://www.npmjs.com/package/classlist-polyfill) this back to IE6.

![classList browser support](https://caniuse.bitsofco.de/image/classlist.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)