Oi, Agostino.
A principal razão para existirem formas diferentes de manipular classes e atributos reside na maneira como o JavaScript mapeia os elementos do DOM.
Por que class não funciona?
No JavaScript, class é uma palavra reservada. Ela é usada para criar classes de objetos (Orientação a Objetos). Por isso, não podemos acessar o atributo de classe de um elemento HTML usando apenas .class. Pra resolver esse conflito de nomes, os criadores da linguagem definiram a propriedade .className.
Diferença entre className e classList.add()
Embora ambos alterem as classes de um elemento, eles funcionam de maneiras distintas:
1. className
Funciona como uma atribuição direta de string.
- Se você usar
elemento.className = "classe-a", o JavaScript define exatamente isso para o elemento. - O perigo: se o elemento já tivesse uma "classe-b" e você fizesse essa atribuição, a "classe-b" seria apagada e substituída por "classe-a". É como trocar todo o conteúdo de uma caixa.
2. classList.add()
Trabalha com uma lista de classes (um objeto especial chamado DOMTokenList).
- Ele é mais específico: ele apenas adiciona a nova classe à lista que já existe, sem mexer nas outras.
- Além do
.add(), o classList oferece métodos úteis como .remove(), .toggle() (para alternar) e .contains() (para verificar se a classe existe).
E por que atributos como type e id funcionam direto?
Diferente de class, palavras como id, type, src ou value não são palavras reservadas do JavaScript. Por isso, os navegadores permitem que a gente acesse e modifique esses valores diretamente como propriedades do objeto.
input.id = "novo-id" — Funciona porque não há conflito de nomes.input.type = "checkbox" — Funciona pela mesma razão.
Qual utilizar no dia a dia?
| Método | Quando usar |
|---|
classList.add() | Recomendado para a maioria dos casos, pois preserva outras classes que o elemento possa ter. |
className | Use quando você quiser limpar todas as classes existentes e definir uma (ou várias) do zero. |
setAttribute() | Útil para atributos personalizados (data-attributes) ou quando você quer uma sintaxe única para qualquer atributo. |
No seu projeto de lista de compras, o uso do classList.add é uma boa prática porque garante que, se no futuro você adicionar uma classe de animação ou estilo extra via CSS, o JavaScript não irá removê-la acidentalmente ao tentar formatar o container.
Espero que essa explicação tenha ajudado a esclarecer o comportamento do DOM!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
