Manipulação de Texto e Atributos

Do Básico ao Avançado: Curso Completo de Manipulação de DOM

Sobre a Aula

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.

Siga-me

Entrar na conversa