Como adicionar classe a elemento pelo DOM com JavaScript

Neste artigo você vai aprender a como adicionar classe a elemento pelo DOM, utilizando um método simples e objetivo

Fala programador(a), beleza? Bora aprender mais sobre DOM em JavaScript!

Para adicionar uma classe a um elemento com JavaScript é muito simples

Vamos utilizar algum método de seleção de elemento, que pode ser:

• querySelector;
• getElementById;
• getElementsByClassName;
• e outros;

Depois vamos acessar a propriedade classList, ela possui alguns métodos

O método add faz exatamente o que precisamos, adiciona uma classe a um elemento do HTML

Passamos a classe como argumento por string

Veja um exemplo prático:

const myElement = document.querySelector("#element")

myElement.classList.add("custom-class")

Na primeira linha temos a seleção do elemento pelo seu id, através do método querySelector

Depois há a adição da classe através de classList

Assim nosso elemento ganhou a classe custom-class, mude este nome para o nome da classe que você precisa inserir no elemento

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como adicionar classe a elemento pelo DOM

Primeiramente precisamos selecionar o elemento, fiz um exemplo com o querySelector

Depois acessamos classList e utilizamos o método add, que adiciona novas classes a um elemento

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!