Manipulação de DOM com JavaScript: Alterando o HTML com Código

A Manipulação de DOM (Document Object Model) é uma das habilidades mais importantes para qualquer desenvolvedor web. Com JavaScript, você pode acessar e modificar elementos HTML dinamicamente, permitindo criar experiências interativas para os usuários. Neste post, vamos explorar como usar métodos como getElementById, querySelector, innerHTML, e style para manipular o DOM.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Dicas de JavaScript básico para iniciantes – Manipulação de DOM

Acessando Elementos HTML

Para manipular elementos HTML, primeiro precisamos acessá-los. JavaScript fornece diversos métodos para isso. Vamos começar com dois dos mais comuns: getElementById e querySelector.

`getElementById`

Este método retorna o elemento que possui o ID especificado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Manipulação de DOM</title>
</head>
<body>
    <p id="meuParagrafo">Este é um parágrafo.</p>
    <script>
        const paragrafo = document.getElementById("meuParagrafo");
        console.log(paragrafo); // Saída: <p id="meuParagrafo">Este é um parágrafo.</p>
    </script>
</body>
</html>

`querySelector`

Este método retorna o primeiro elemento que corresponde ao seletor CSS especificado:

<script>
    const paragrafo = document.querySelector("#meuParagrafo");
    console.log(paragrafo); // Saída: <p id="meuParagrafo">Este é um parágrafo.</p>
</script>

Modificando Conteúdo HTML

Para alterar o conteúdo de um elemento HTML, utilizamos a propriedade innerHTML.

<script>
    paragrafo.innerHTML = "Este parágrafo foi alterado!";
    console.log(paragrafo.innerHTML); // Saída: Este parágrafo foi alterado!
</script>

Alterando Estilos com JavaScript

Podemos modificar o estilo dos elementos usando a propriedade style.

<button id="meuBotao">Clique aqui</button>
<script>
    const botao = document.getElementById("meuBotao");
    botao.style.backgroundColor = "blue";
    botao.style.color = "white";
    botao.style.border = "none";
    botao.style.padding = "10px 20px";
</script>

Adicionando Interatividade

Vamos adicionar interatividade aos nossos elementos HTML. Neste exemplo, alteraremos o conteúdo de um parágrafo e a cor de um botão ao clicar.

<button id="meuBotao">Clique para mudar o parágrafo</button>
<p id="meuParagrafo">Este é um parágrafo interativo.</p>
<script>
    botao.addEventListener("click", () => {
        paragrafo.innerHTML = "O parágrafo foi alterado!";
        botao.style.backgroundColor = "green";
    });
</script>

Conclusão

A manipulação de DOM com JavaScript é uma ferramenta poderosa para criar páginas web dinâmicas e interativas. Com métodos como getElementById e querySelector, e propriedades como innerHTML e style, você pode acessar e modificar elementos HTML facilmente. Pratique estes conceitos para melhorar suas habilidades e criar experiências mais ricas para seus usuários.