JavaScript Academy · Aula

Modificando atributos e classes

Use setAttribute e a API classList.

Modificando atributos e classes é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Atributos e classes

Os elementos possuem atributos (como href ou data-id) e classes CSS. JavaScript oferece APIs precisas para ler e alterar ambos.

getAttribute

getAttribute lê o valor de um atributo como uma cadeia de caracteres ou retorna null se ele não existir.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute cria ou atualiza um atributo. Os valores são sempre cadeias de caracteres.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute e hasAttribute

Use removeAttribute para excluir um atributo e hasAttribute para verificar se ele existe.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Propriedades e atributos

Muitos atributos também existem como propriedades do elemento (como element.id ou input.value). As propriedades refletem o estado atual, enquanto os atributos geralmente contêm o valor inicial do HTML.

input.value;                 // current value
input.getAttribute("value"); // original default

Conjunto de dados para data-*

Os atributos personalizados data-* são expostos por meio do objeto dataset, usando chaves em camelCase.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

Visão geral de classList

classList é um objeto dinâmico para gerenciar classes sem editar manualmente a cadeia de caracteres de className.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add e remove

add e remove aceitam um ou mais nomes de classes e lidam tranquilamente com duplicatas ou classes inexistentes.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle adiciona a classe se ela não existir e a remove se existir, retornando um valor booleano que representa o novo estado. Um segundo argumento força a ativação ou a desativação.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains e replace

contains verifica se uma classe está presente e replace substitui uma classe por outra no próprio lugar.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Por que classList é melhor que className

Editar className como uma cadeia de caracteres pode substituir acidentalmente outras classes. classList altera com segurança apenas as classes desejadas.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Verificação rápida

Escolha o comportamento de alternância.

Recapitulação

Leia e escreva atributos com getAttribute/setAttribute/removeAttribute/hasAttribute e acesse data-* por meio de dataset. Gerencie classes com os métodos de classList add, remove, toggle, contains e replace, que são mais seguros do que sobrescrever className.

Perguntas Frequentes

A aula “Modificando atributos e classes” é grátis?

Sim — o texto completo de “Modificando atributos e classes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Modificando atributos e classes”?

Use setAttribute e a API classList. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Modificando atributos e classes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy