Aula 12: DOM Descomplicado: O Segredo por Trás da Interatividade nas Páginas Web!
Hello, World!
Eae, Devs! Tudo certo?
Depois do Carnaval, estamos de volta com tudo no nosso blog! Novas postagens, novos conteúdos e, claro, mais aprendizado juntos. E pra começar com o pé direito, hoje vamos mergulhar no DOM (Document Object Model)!
Se você quer aprender como manipular elementos da página, mudar estilos dinamicamente e deixar seu código ainda mais interativo, essa aula é pra você. Então, sem enrolação…
BORA CODAR!
Introdução ao DOM em JavaScript
O que é o DOM?
O DOM (Document Object Model) é uma interface de programação para documentos HTML e XML. Ele representa a estrutura da página de forma hierárquica, onde cada elemento HTML é um nó dessa árvore. O JavaScript pode acessar, modificar e manipular essa árvore, permitindo que criemos páginas web dinâmicas e interativas.
Por que o DOM é importante?
- Permite que JavaScript acesse e modifique elementos HTML e seus estilos.
- Possibilita a interação dinâmica do usuário com a página.
- Facilita a criação de eventos, como cliques e teclas pressionadas.
- Permite atualizar o conteúdo sem precisar recarregar a página.
Como o DOM funciona?
Quando um navegador carrega uma página, ele transforma o código HTML em um modelo de árvore DOM. Esse modelo organiza cada elemento dentro de uma hierarquia:
- O documento inteiro (
document) é a raiz da árvore. - As tags
<html>,<head>,<body>e seus elementos são nós. - Cada nó pode conter outros nós (filhos), criando uma estrutura semelhante a uma árvore genealógica.
Visualizando o DOM no Console
Podemos explorar o DOM diretamente pelo console do navegador. Abra o DevTools (F12 no Chrome) e digite:
Isso nos ajuda a entender a estrutura do documento e como acessá-la.
Como Selecionar Elementos no DOM
Para manipular elementos no DOM, primeiro precisamos selecioná-los. O JavaScript oferece diferentes métodos para isso.
Selecionando elementos por ID
O ID é um identificador único para um elemento. Podemos selecionar um elemento usando getElementById().
Exemplo prático:
Explicação:
- O método
getElementById("titulo")retorna o elemento com o ID “titulo”. - Podemos manipulá-lo diretamente no JavaScript.
Selecionando elementos por Classe
Podemos selecionar elementos que compartilham a mesma classe usando getElementsByClassName().
Exemplo prático:
Explicação:
- O método
getElementsByClassName("texto")retorna uma coleção de elementos com a classe “texto”. - Como ele retorna vários elementos, precisamos acessar cada um individualmente usando índices (
paragrafos[0],paragrafos[1]).
Selecionando elementos por Tag
Se quisermos selecionar todos os elementos de uma determinada tag, usamos getElementsByTagName().
Exemplo prático:
Explicação:
getElementsByTagName("div")retorna uma coleção de todas as<div>na página.
Selecionando elementos com querySelector e querySelectorAll
Esses métodos permitem buscar elementos como em um seletor CSS.
Exemplo prático:
Explicação:
querySelector("p")retorna apenas o primeiro<p>encontrado.querySelectorAll("p")retorna todos os<p>como uma NodeList.
Manipulando Elementos do DOM
Podemos alterar elementos do DOM para modificar seu conteúdo, adicionar elementos e muito mais.
Exemplo: Criando um botão que adiciona comentários dinamicamente
HTML
CSS
JS
Resultado
Explicação:
- O botão chama um evento de clique.
- Criamos um novo elemento
<p>. - Adicionamos o novo comentário à
divde comentários.
Manipulando Estilos no DOM
Mudando o estilo com JavaScript
Podemos alterar os estilos de um elemento diretamente pelo JavaScript usando a propriedade .style.
Exemplo prático: Mudando a cor do texto ao clicar em um botão
HTML
CSS
JS
Resultado
Explicação:
document.getElementById("meuTexto").style.color = "blue";→ Modifica a cor do texto.style.fontWeight = "bold";→ Deixa o texto em negrito.- Essas mudanças ocorrem imediatamente ao clicar no botão.
Manipulando Atributos
Podemos acessar e modificar atributos dos elementos HTML usando os métodos setAttribute() e getAttribute().
Exemplo prático: Alterando a imagem ao clicar em um botão
HTML
JS
Resultado
Explicação:
setAttribute("src", "imagem2.jpg")→ Substitui a imagem exibida.setAttribute("alt", "Nova imagem carregada!")→ Atualiza o atributoaltpara melhor acessibilidade.
Eventos do DOM
O que são eventos?
Eventos são ações que ocorrem no navegador, como um clique, um pressionamento de tecla, ou o carregamento da página. O JavaScript permite “ouvir” esses eventos e responder a eles, tornando a página interativa.
Os eventos mais comuns são:
- click → Quando o usuário clica em um elemento.
- mouseover → Quando o mouse passa sobre um elemento.
- keydown → Quando o usuário pressiona uma tecla.
- submit → Quando um formulário é enviado.
Exemplo de evento: Alterando o texto ao clicar no botão
HTML
JS
Resultado
Explicação:
addEventListener("click", function() {...})→ Ouvimos o evento de clique no botão.textContent = "O botão foi clicado!";→ Alteramos o conteúdo do parágrafo dinamicamente.
Exemplo de evento: Detectando teclas pressionadas
HTML
JS
Resultado
Explicação:
addEventListener("keyup", function(event) {...})→ Dispara um evento quando o usuário solta uma tecla.event.target.value→ Captura o texto que está sendo digitado no campo de entrada.
Conclusão
Agoranos dominamos os conceitos fundamentais do DOM em JavaScript!
✅ Nos aprendemos a:
✔ Acessar e modificar elementos do DOM.
✔ Manipular estilos e atributos de elementos HTML.
✔ Trabalhar com eventos para tornar a página interativa.
Link para Github: https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-12-guilhermemachadodev
Próximos Passos…
Devs, chegamos ao final da parte intermediária de JavaScript! Agora, o próximo passo será um nível mais avançado, onde vamos explorar conceitos e técnicas ainda mais poderosas para aprimorar o seu código.
Fiquem ligados, porque vem muita coisa interessante por aí. Preparados para o próximo desafio? Vamos juntos nessa jornada e bora codar!
Publicar comentário