The Classlist API

Hey fellow creators,

Let's learn how to use the classlist API, which is handy since it'll let you add, remove, and plenty of other things with the classes of your html code!

If you prefer to watch the video version, it's right here :

Here's a code pen for you to follow along!

1. Access the API.

This is an API directly implemented in the browser, so you don't need to do anything as long as you are using Javascript with your browser.

Create a simple title in your HTML, here's mine:

<h1 class="title t1 heading">Yellowstone National Park is an American national park located in the western United States.</h1>

As well as a CSS file:

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: Arial, Helvetica, sans-serif;
}

.title {
    color: #f1f1f1;
    padding: 15px 40px;
}

.salmon {
    background: salmon;
}

So here's how you can access the API:

const title = document.querySelector('h1')
console.log(title.classList);

Then, look into your console and you'll see that you have a list with the different classes, and in the prototype you'll see the different methods that you can use, like toggle, replace etc.

2. Let's try the add method!

title.classList.add('salmon')

This will add the background colour to the H1! You're just adding one class to your title.

3. Try the remove method.

title.classList.remove('salmon')

And now the background color is removed!

4. What does the toggle method do?

Imagine if you click on the element, you want to toggle the salmon class:

title.addEventListener('click', () => {
            title.classList.toggle('salmon')
})

Now, if you click on it, the background will reappear, and if you click on it again it'll disappear, etc!

5. The item method.

console.log(title.classList.item(0));

This will give us the first class. It's not always useful, but that way you know it!

6. What's the contains method?

This method is more useful! This will help you know if an element contains a certain class:

console.log(title.classList.contains('heading'));

Here, since our title does contain the class heading, it will return true in the console.

7. What about the replace method?

The replace method is pretty straightforward: as the title says, it replaces a class by another class:

title.classList.replace('heading', 'salmon')

The title will now have the class salmon instead of heading.

These methods are fairly easy to learn, but are pretty useful as you can see!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.