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!