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?

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

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.