Manipulação de Atributos e Classes e O Contexto this 

1. Manipulação de Atributos e Classes: O Próximo Nível do Estilo com JS

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');

2. O Contexto this em JavaScript

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.