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.
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.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
