No Front-end moderno, o JavaScript não apenas muda o conteúdo, mas também assume o controle dinâmico do CSS e dos atributos HTML. Isso garante que a responsabilidade do estilo permaneça no CSS, enquanto o JavaScript gerencia a lógica de quando e como o estilo deve ser aplicado.
1.1. Gerenciamento de Classes (classList)
A maneira mais limpa de alterar a aparência de um elemento é adicionando ou removendo classes CSS. O objeto classList facilita isso, permitindo que você altere o estilo de forma eficiente:
.add('classe'): Adiciona uma classe ao elemento.
.remove('classe'): Remove uma classe do elemento.
.toggle('classe'): Adiciona a classe se ela não existir, e remove se ela existir. (Ideal para botões on/off).
Exemplo Prático (classList):
Imagine que você tem uma classe CSS chamada .destaque que deixa o texto vermelho.
JavaScript
// 1. Seleciona o elemento que queremos manipular
const titulo = document.querySelector('h1');
// 2. Adiciona a classe 'destaque' (Deixa o título vermelho)
titulo.classList.add('destaque');
// 3. Simula um clique para ligar/desligar (toggle)
botao.addEventListener('click', function() {
// Se a classe existir, remove; se não existir, adiciona
titulo.classList.toggle('ativo');
});
1.2. Manipulação de Atributos (set e get)
O JavaScript pode controlar qualquer atributo HTML de um elemento, como o src de uma imagem ou o href de um link:
.setAttribute(nome, valor): Define (cria ou substitui) o valor de um atributo.
.getAttribute(nome): Lê o valor atual de um atributo.
Exemplo Prático (Atributos):
JavaScript
// 1. Seleciona o elemento de imagem
const minhaImagem = document.querySelector('#perfil-foto');
// 2. GET: Lê o caminho atual da imagem
let caminhoAntigo = minhaImagem.getAttribute('src');
console.log("Caminho atual:", caminhoAntigo);
// 3. SET: Altera o atributo 'src' para uma nova imagem
minhaImagem.setAttribute('src', 'nova-foto-perfil.jpg');
O this em JavaScript é uma palavra-chave que se refere ao contexto de execução atual. Ele é crucial porque seu valor muda dependendo de onde e como uma função é chamada, sendo essencial para criar códigos que se referem ao objeto ou elemento correto.
Contexto em Event Listeners
Dentro de um Event Listener (uma função que reage a um evento como o clique), o this aponta diretamente para o elemento DOM que disparou o evento.
Exemplo Prático (this em Eventos):
Este código permite que você aplique uma classe CSS (como .clicado) apenas no botão que o usuário acionou, mesmo que haja vários botões na página.
Estrutura HTML:
HTML
<button class="cor-btn">Botão 1</button>
<button class="cor-btn">Botão 2</button>
<button class="cor-btn">Botão 3</button>
Script JavaScript:
JavaScript
// 1. Seleciona TODOS os botões
const botoes = document.querySelectorAll('.cor-btn');
// 2. Itera sobre a lista de botões
botoes.forEach(function(botao) {
// 3. Adiciona o listener a cada um
botao.addEventListener('click', function() {
// O 'this' aponta EXCLUSIVAMENTE para o botão que o usuário clicou!
this.classList.add('clicado');
this.innerHTML = 'Fui Clicado!';
});
});
Neste exemplo, o this garante que as mudanças afetem apenas o elemento específico que acionou o evento.