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?

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.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

Donkey Kong

A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.