Antigamente, precisávamos de bibliotecas gigantescas como o jQuery apenas para fazer um menu abrir e fechar na tela. Hoje, o JavaScript nativo nos dá ferramentas poderosas e extremamente rápidas para controlar qualquer estilo.
1. A propriedade classList
O objeto classList é a melhor forma de adicionar, remover ou alternar classes de um elemento HTML. Ele possui três métodos principais que você vai usar no seu dia a dia: add, remove e toggle.
O método toggle funciona como um interruptor de luz: se a classe já existir no elemento, ele remove; se não existir, ele adiciona automaticamente.
const elemento = document.getElementById("meuMenu");
elemento.classList.toggle("active");2. Evitando conflitos com Elementos Inexistentes
Antes de aplicar qualquer comando em um elemento, certifique-se de que o JavaScript realmente o encontrou na página para evitar travamentos no console.
if (elemento) { ... } antes de disparar o seu código. Isso evita que o script quebre a página caso o elemento não exista naquela tela específica.
Conclusão
Escrever JavaScript limpo e sem dependências deixa seu sistema mais leve, mais rápido de carregar no celular e muito mais profissional.