Vanilla JS: Classes

Oct 27, 2018 · 153 words · 1 minute read dom js vanilla

A few weeks ago, an article was making the rounds about how GitHub removed jQuery from its front end. I still think that jQuery is a great intro to writing small applications and dipping your toe into writing more complex code. I thought it would be fun to take apart some common jQuery usages and look at them.

Today, I wanted to do some class manipulation. A common thing that people still use jQuery for is to toggle or just add and remove a class.

Add Class

const button = document.querySelector(.btn);
el.classList.add(active);

Remove Class

const button = document.querySelector(.btn);
button.classList.remove(className);

Toggle Class

const button = document.querySelector(.btn);
button.classList.toggle(className);

As you can see from the above examples, these tasks are no longer extensive to do in plain JavaScript. When jQuery was first released, it was a revelation—the API consumed low level, and it really saved you a lot of work accomplishing what felt like simple tasks.