Até agora, usamos o JavaScript para trabalhar com lógica e dados. Mas o grande poder do JavaScript na web aparece quando ele passa a interagir com a página HTML.

Essa ponte entre JavaScript e HTML se chama DOM.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Entender o que é o DOM
  • Saber como o navegador interpreta o HTML
  • Compreender como o JavaScript “enxerga” a página
  • Preparar-se para manipular elementos da página

🧠 O que significa DOM?

DOM é a sigla para Document Object Model, ou em português, Modelo de Objetos do Documento.

Na prática, o DOM é uma representação da página HTML em forma de objetos, que o JavaScript consegue acessar e manipular.

🌳 A página HTML vira uma árvore

Quando o navegador carrega uma página HTML, ele não vê apenas texto. Ele transforma o HTML em uma estrutura de árvore.

Cada parte do HTML vira um nó dessa árvore.

  • <html> é o nó principal
  • <head> e <body> são filhos
  • Elementos dentro do body são descendentes
Por isso dizemos que o DOM é uma “árvore de elementos”.

👀 Como o JavaScript vê a página?

Para o JavaScript, a página inteira começa no objeto: 

 document

O objeto document representa todo o HTML da página.

A partir dele, o JavaScript pode:

  • acessar elementos
  • alterar textos
  • mudar estilos
  • responder a eventos

🔗 DOM não é JavaScript

Esse ponto é MUITO importante:

O DOM não faz parte da linguagem JavaScript. Ele é uma API fornecida pelo navegador.

O JavaScript apenas usa o DOM para interagir com a página.

🧩 Exemplo conceitual

Considere este HTML: 

 <body> <h1>Olá</h1> <p>Bem-vindo</p> </body>

No DOM, isso vira algo como:

  • document
  • └── body
  •   ├── h1
  •   └── p

🧠 Por que o DOM é tão importante?

Tudo que fazemos com JavaScript na web passa pelo DOM:

  • alterar textos
  • mostrar ou esconder elementos
  • mudar cores e estilos
  • reagir a cliques e ações do usuário

Sem entender o DOM, o JavaScript fica limitado.

⚠️ Erro comum de iniciantes

Um erro comum é tentar usar JavaScript sem entender a estrutura da página.

Antes de manipular algo com JavaScript, você precisa saber onde esse elemento está no DOM.

🧠 Mentalidade correta

  • HTML cria a estrutura
  • CSS define o visual
  • JavaScript interage com o DOM
Pense no DOM como a “ponte” entre o JavaScript e o HTML.

Resumo da aula para nunca mais esquecer

  • DOM significa Document Object Model.
  • O HTML vira uma árvore de objetos.
  • O JavaScript acessa tudo a partir de document.
  • DOM é fornecido pelo navegador, não pela linguagem.

▶️ Próxima aula

Na próxima aula, vamos aprender a selecionar elementos do DOM usando querySelector e querySelectorAll.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.