Manipulação de Texto e Atributos
Agora que sabemos como acessar elementos, é hora de dar vida a eles! Vamos começar manipulando o texto dentro dos elementos e seus atributos.
Manipulação de Texto com innerHTML e textContent
Para mudar o texto dentro de um elemento, temos duas opções: innerHTML
e textContent
.
// Usando innerHTML var meuParagrafo = document.getElementById('meuParagrafo'); meuParagrafo.innerHTML = 'Novo texto aqui!'; // Usando textContent var meuTitulo = document.getElementById('meuTitulo'); meuTitulo.textContent = 'Um Novo Título';
A diferença? innerHTML
interpreta qualquer HTML dentro do texto, enquanto textContent
trata tudo como texto simples.
Manipulação de Atributos com getAttribute e setAttribute
Agora, para mexer nos atributos, utilizamos getAttribute
e setAttribute
.
var meuLink = document.getElementById('meuLink'); // Pegando o valor de um atributo var hrefValor = meuLink.getAttribute('href'); // Mudando o valor de um atributo meuLink.setAttribute('href', 'https://www.novolink.com');
Aqui, estamos pegando e mudando o valor do atributo “href” de um link.
Exercício Prático: Crie um Botão de Modo Noturno
Vamos aplicar o que aprendemos! Crie um botão que, ao ser clicado, muda o texto de todos os parágrafos para branco e o fundo para preto, simulando um modo noturno.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercício Prático: Modo Noturno</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="botaoModoNoturno">Modo Noturno</button> <p>Texto de exemplo 1.</p> <p>Texto de exemplo 2.</p> <p>Texto de exemplo 3.</p> <script src="script.js"></script> </body> </html>
CSS
body { font-family: Arial, sans-serif; } button { padding: 10px; background-color: #3498db; color: #fff; border: none; cursor: pointer; } p { padding: 10px; margin: 10px 0; background-color: #ecf0f1; color: #333; }
JavaScript
document.getElementById('botaoModoNoturno').addEventListener('click', function() { var paragrafos = document.querySelectorAll('p'); paragrafos.forEach(function(paragrafo) { paragrafo.style.color = 'white'; paragrafo.style.backgroundColor = 'black'; }); });
Aqui, adicionamos um ouvinte de evento ao botão que, quando clicado, seleciona todos os parágrafos e muda suas cores.
Experimente! Modifique e melhor esse código, é dessa forma que você aprende. No próximo tópico, vamos aprender a adicionar e remover elementos, expandindo ainda mais nosso poder de manipulação.