Alterando atributos: mudando características dos elementos (src, href, class)

Até aqui, você já aprendeu a selecionar elementos e mudar texto.
Agora vamos mexer nas “características” dos elementos HTML, ou seja, nos atributos.

Pense em um elemento como um produto com etiqueta:

• o texto é o nome visível
• os atributos são os detalhes da etiqueta (link, imagem, classe, etc.)

O que são atributos?

Atributos são informações extras dentro da tag HTML.

Exemplos:

• src em <img> (caminho da imagem)
• href em <a> (destino do link)
• class (classe CSS)
• alt (texto alternativo de imagem)
• disabled (desabilita botão/campo)

Exemplo inicial

<a id="meuLink" href="https://exemplo.com">Visitar</a>
<img id="minhaImagem" src="foto1.jpg" alt="Foto inicial">

Agora vamos alterar esses atributos com JavaScript.

Alterando atributos com setAttribute

setAttribute define ou atualiza um atributo.

const link = document.getElementById("meuLink");
link.setAttribute("href", "https://developer.mozilla.org");

const imagem = document.getElementById("minhaImagem");
imagem.setAttribute("src", "foto2.jpg");
imagem.setAttribute("alt", "Foto atualizada");

Lendo atributos com getAttribute

const destino = link.getAttribute("href");
console.log(destino);

Muito útil para verificar o valor atual antes de mudar.

Removendo atributos com removeAttribute

link.removeAttribute("href");

Sem href, o link deixa de apontar para uma URL.

Alterando class: duas formas comuns

1) Com setAttribute (troca total)

const caixa = document.querySelector(".caixa");
caixa.setAttribute("class", "caixa destaque");

2) Com classList (mais flexível)

caixa.classList.add("destaque");
caixa.classList.remove("oculto");
caixa.classList.toggle("ativo");

Para manipular classe no dia a dia, classList costuma ser a forma mais prática.

Alterando atributos direto por propriedade

Em muitos casos, você também pode alterar direto:

link.href = "https://google.com";
imagem.src = "nova-foto.jpg";

Funciona bem, mas entender getAttribute/setAttribute é essencial.

Exemplo prático com botão

<a id="site" href="https://exemplo.com">Abrir site</a>
<button id="trocar">Trocar destino</button>

const site = document.getElementById("site");
const trocar = document.getElementById("trocar");

trocar.addEventListener("click", function () {
  site.setAttribute("href", "https://developer.mozilla.org");
  site.textContent = "Abrir MDN";
});

Ao clicar, o link muda de destino e o texto também.

Cuidados importantes

• Verifique se o elemento existe antes de alterar.
• Use nomes de atributos corretos (href, src, alt, class).
• Ao trocar classes, prefira classList para não apagar classes sem querer.
• Em links externos, revise o destino para evitar URLs quebradas.

Resumo da lição

• Atributos guardam características dos elementos HTML.
• Use:
  • getAttribute para ler
  • setAttribute para criar/alterar
  • removeAttribute para remover
• Para classes, classList é ótimo no dia a dia.
• Alterar atributos permite mudar comportamento e aparência da página dinamicamente.