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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.