O DOM: Acessando e Manipulando Elementos HTML.🌴 TRILHA JavaScript 🚀 Etapa 11

Academy Code Christ 0

 Seja muito bem-vindo à Academy Code Christ!

 

🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🚀 Etapa 11 

 

 Visualizando o DOM (estrutura)


<html>

  <head></head>

  <body>

    <h1>Título</h1>

    <p>Parágrafo</p>

    <button>Botão</button>

  </body>

</html>

 

💡 Internamente, o navegador cria algo como:

document

 └── html

     ├── head

     └── body

         ├── h1

         ├── p

         └── button

 

Cada elemento pode ser acessado, modificado, criado ou removido via JavaScript.

 

🧩 Como acessar elementos no DOM

O objeto document representa toda a página, e é através dele que podemos buscar e manipular elementos.

Existem vários métodos de seleção:

Método

Descrição

Exemplo

getElementById()

Busca um único elemento pelo ID

document.getElementById("titulo")

getElementsByClassName()

Busca elementos pela classe

document.getElementsByClassName("item")

getElementsByTagName()

Busca elementos pela tag

document.getElementsByTagName("p")

querySelector()

Retorna o primeiro elemento que combina com um seletor CSS

document.querySelector(".caixa")

querySelectorAll()

Retorna todos os elementos que combinam com o seletor CSS

document.querySelectorAll("div")

 

💡 Exemplo prático

<h1 id="titulo">Olá Mundo</h1>

<p class="mensagem">Bem-vindo ao DOM!</p>

 

<script>

  const elementoTitulo = document.getElementById("titulo");

  const elementoMensagem = document.querySelector(".mensagem");

 

  console.log(elementoTitulo.textContent);

  console.log(elementoMensagem.textContent);

</script>

 

✅ No console, o JS mostrará:

Olá Mundo

Bem-vindo ao DOM!

 

 

🧮 Modificando conteúdo HTML

Você pode alterar o texto ou o HTML interno de qualquer elemento.

Propriedade

Função

.textContent

Altera o texto dentro do elemento

.innerHTML

Altera o conteúdo HTML interno

.innerText

Parecido com .textContent, mas respeita estilos visuais (ex.: ocultos)

Exemplo 1:

<h1 id="titulo">Título antigo</h1>

 

<script>

  const titulo = document.getElementById("titulo");

  titulo.textContent = "Título atualizado via JavaScript!";

</script>

 

💬 O texto muda automaticamente na tela.

 

Exemplo 2 — Usando innerHTML

<div id="mensagem"></div>

 

<script>

  let msg = document.getElementById("mensagem");

  msg.innerHTML = "<strong>Bem-vindo!</strong> Tudo pronto para aprender DOM!";

</script>

 

💡 innerHTML permite inserir tags HTML dentro da string.

 

🎨 Manipulando Estilos (CSS via JS)

Você pode alterar propriedades CSS diretamente através do JS com .style.

Exemplo:

<div id="caixa" style="width:200px;height:200px;background:skyblue;"></div>

 

<script>

  const caixa = document.getElementById("caixa");

  caixa.style.background = "lightgreen";

  caixa.style.borderRadius = "10px";

  caixa.style.border = "2px solid #333";

</script>

 

💬 O JavaScript manipula o estilo do elemento em tempo real.

🧠 Dica: nomes CSS com hífen se transformam em camelCase.

●     background-color ➜ backgroundColor

●     font-size ➜ fontSize

●     text-align ➜ textAlign

 

⚙️ Alterando Atributos HTML

Use o método setAttribute() para alterar qualquer atributo de um elemento, ou getAttribute() para consultar o valor atual.

Exemplo:

<img id="imagem" src="foto1.jpg" width="200">

 

<script>

  const imagem = document.getElementById("imagem");

 

  imagem.setAttribute("src", "foto2.jpg");

  imagem.setAttribute("alt", "Imagem alterada via JS");

  console.log(imagem.getAttribute("src"));

</script>

 

💡 Assim, você pode mudar imagens dinamicamente (ótimo para slides, galerias, etc.).

 

🧩 Criando e Adicionando Elementos

Podemos criar novos elementos HTML via código.

Exemplo:

<div id="lista"></div>

 

<script>

  const lista = document.getElementById("lista");

 

  const novoItem = document.createElement("p");

  novoItem.textContent = "Este parágrafo foi criado via JavaScript.";

 

  lista.appendChild(novoItem);

</script>

 

💡 createElement() cria um novo elemento, e appendChild() o adiciona dentro do elemento pai.

 

❌ Removendo Elementos

Use remove() ou removeChild() para excluir elementos.

Exemplo:

<p id="texto">Esse texto vai sumir...</p>

 

<script>

  const texto = document.getElementById("texto");

  texto.remove(); // Remove o elemento da página

</script>

 

💬 Esse comando é muito usado para remover mensagens automáticas (ex.: “alertas de sucesso”).

 

🔁 Percorrendo Múltiplos Elementos

Com querySelectorAll() ou getElementsByClassName(), você manipula listas de elementos.

<ul>

  <li class="item">Item 1</li>

  <li class="item">Item 2</li>

  <li class="item">Item 3</li>

</ul>

 

<script>

  const itens = document.querySelectorAll(".item");

 

  itens.forEach((elemento, i) => {

    elemento.textContent = `Novo texto ${i + 1}`;

    elemento.style.color = "blue";

  });

</script>

 

💡 O método .forEach() percorre todos os itens e aplica uma mudança a cada um.

 

🖱️ DOM + Eventos: Criando Interatividade

Combine eventos com manipulação do DOM para gerar interações dinâmicas.

Exemplo — Mostrar e esconder conteúdo

<button id="mostrar">Mostrar</button>

<button id="ocultar">Ocultar</button>

<p id="texto">Este é um texto dinâmico!</p>

 

<script>

  const texto = document.getElementById("texto");

  const btnMostrar = document.getElementById("mostrar");

  const btnOcultar = document.getElementById("ocultar");

 

  btnMostrar.addEventListener("click", () => {

    texto.style.display = "block";

  });

 

  btnOcultar.addEventListener("click", () => {

    texto.style.display = "none";

  });

</script>

 

💬 Você uniu eventos + controle do DOM ➜ página totalmente interativa!

 

🧮 Exemplo Completo — Lista de Tarefas Simples

<h2>Lista de Tarefas</h2>

<input type="text" id="tarefa" placeholder="Digite uma tarefa">

<button id="adicionar">Adicionar</button>

<ul id="lista"></ul>

 

<script>

  const input = document.getElementById("tarefa");

  const botao = document.getElementById("adicionar");

  const lista = document.getElementById("lista");

 

  botao.addEventListener("click", () => {

    const texto = input.value.trim();

    if (texto !== "") {

      const li = document.createElement("li");

      li.textContent = texto;

      lista.appendChild(li);

      input.value = ""; // limpar campo

    }

  });

</script>

 

💡 Esse é o primeiro passo para uma to-do list completa — algo que construiremos mais à frente!

 

⚠️ Dicas e Boas Práticas

✅ Sempre use const e let para armazenar referências (nunca var);
 ✅ Prefira querySelector() e querySelectorAll() (são mais versáteis);
 ✅ Use classList.add(), remove() e toggle() para manipular classes;
 ✅ Evite innerHTML com conteúdo externo — pode criar falhas de segurança (XSS);
 ✅ Mantenha o HTML limpo, deixe a lógica no JS.

 

💡 Exercício Prático

Crie uma pequena página que:

1.    Mostre um título <h1> “Bem-vindo!”;

2.    Tenha um botão “Mudar cor”;

3.    Ao clicar, o título mude de cor aleatoriamente.

💬 Dica:

function corAleatoria() {

  const r = Math.floor(Math.random() * 256);

  const g = Math.floor(Math.random() * 256);

  const b = Math.floor(Math.random() * 256);

  return `rgb(${r}, ${g}, ${b})`;

}

 

document.getElementById("botao").addEventListener("click", () => {

  document.querySelector("h1").style.color = corAleatoria();

});

 

✨ Uma forma divertida de combinar funções + DOM + eventos.

 

🧠 Hoje você aprendeu:

✔ O que é o DOM e sua importância no JavaScript;
 ✔ Diferentes formas de acessar e selecionar elementos;
 ✔ Como modificar texto, HTML, atributos e estilos;
 ✔ Como criar, adicionar e remover elementos dinamicamente;
 ✔ Como percorrer listas e interagir com o usuário;
 ✔ E criou exemplos funcionais de interatividade real.

 

🎓 Conclusão

Agora você domina o DOM, o motor que conecta o JavaScript ao HTML.
 Você é capaz de controlar completamente o conteúdo e o comportamento da página.

A partir da próxima aula, você aprenderá a manipular estilos, classes e efeitos visuais diretamente pelo JavaScript, criando páginas ainda mais dinâmicas e modernas.



📚 Continue aprendendo JavaScript:





🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição

🚀 Etapa 07 👉 Funções

🚀 Etapa 08 👉 Eventos

🚀 Etapa 09 👉 O DOM


🚀 Etapa 11 👉 Você está nessa Etapa


Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 


Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem