Como Adicionar Classes No HTML Com Javascript Puro

Quando precisamos manipular informações diretamente no HTML pelo Javascript, a primeira coisa que normalmente vem à cabeça é o nosso querido JQuery, com suas facilidades de acessar elementos pela classe com o $, fica fácil e rápido, não é mesmo?

Entretanto, nem sempre precisamos ou queremos importar uma lib inteira apenas para adicionar uma classe! Então, como podemos adicionar uma classe no HTML com javascript puro?

Adicionando classe com javascript

Para adicionar uma classe com o JQuery, você faria algo semelhante com:

$("#elemento").addClass("red");

Agora, em sua versão com javascript puro:

const elemento = document.getElementById("elemento");

if (elemento.classList) elemento.classList.add("red");
else elemento.className += " red";

Simples, não é mesmo? Basicamente, criamos uma variável com o elemento HTML, para que não precisemos ficar percorrendo o DOM para acessar aquela tag, desta forma melhoramos nossa performance, e verificamos se há alguma classe já adicionada neste elemento!

Ainda falando em performance, selecionar um elemento através do JS puro, é bem mais rápido do que quando feito com JQuery, o que pode ser visto neste JSFiddle, que foi desenvolvido para este post do develoger