Modificando conteúdo e estilos dos elementos
Seja bem-vindo à terceira aula do módulo 3! Nesta etapa, você explorará o poder de modificar o conteúdo e os estilos dos elementos HTML dinamicamente com JavaScript, abrindo um mundo de possibilidades para personalizar interfaces e criar experiências de usuário mais atraentes e interativas.
Modificando o conteúdo dos elementos
Ao utilizar a propriedade innerHTML, podemos substituir o conteúdo interno de um elemento.
Por exemplo, podemos alterar o texto de um parágrafo ou adicionar uma lista de itens.
O método textContent permite alterar o texto visível de um elemento sem processar tags HTML.
Isso é útil quando queremos modificar apenas o texto dentro de um elemento.
// Alterando o texto de um parágrafo
const paragraph = document.getElementById('myParagraph');
paragraph.innerHTML = 'Novo texto do parágrafo';
// Alterando o texto de um elemento sem processar tags HTML
const heading = document.querySelector('h1');
heading.textContent = 'Título Modificado';
Adicionando e removendo elementos
Podemos criar elementos HTML utilizando o método createElement e adicioná-los ao documento utilizando o método appendChild.
Isso é útil para criar dinamicamente novos elementos em resposta a ações do usuário ou eventos. O método removeChild permite remover um elemento específico do DOM.
Isso é útil quando queremos eliminar um elemento existente da página.
// Criando um novo elemento e adicionando-o ao final de um elemento existente
const list = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = 'Novo item da lista';
list.appendChild(newItem);
// Removendo um elemento específico do DOM
const elementToRemove = document.getElementById('myElement');
elementToRemove.parentNode.removeChild(elementToRemove);
Modificando estilos dos elementos
Podemos acessar e modificar as propriedades de estilo de um elemento utilizando a propriedade style.
Por exemplo, podemos alterar a cor de fundo, a fonte ou o tamanho de um elemento. Para adicionar ou remover classes CSS de um elemento, podemos utilizar a propriedade className.
Isso nos permite aplicar estilos pré-definidos a um elemento.
Além disso, a propriedade classList oferece métodos para manipular classes CSS de forma mais avançada, como adicionar, remover ou verificar a presença de uma classe.
// Alterando o estilo de fundo de um elemento
const box = document.getElementById('myBox');
box.style.backgroundColor = 'red';
// Adicionando uma classe CSS a um elemento
const button = document.getElementById('myButton');
button.className = 'primary-button';
// Adicionando uma classe CSS a um elemento utilizando classList
const box = document.getElementById('myBox');
box.classList.add('highlight');
Ao dominar esses conceitos, você será capaz de manipular o conteúdo e os estilos dos elementos HTML de forma dinâmica e interativa em suas aplicações JavaScript.
Desafio:
- Crie um script JavaScript que cria um elemento “div” na página web.
- Adicione um texto à “div”.
- Crie um botão que, quando clicado, altera a cor da “div” e a posição da mesma na tela.
Agora que você aprendeu como modificar o conteúdo e os estilos dos elementos, é hora de dar vida interativa ao seu código JavaScript.
Na próxima aula, vamos explorar como manipular eventos do usuário.
