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?

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.

Nintendo Wii

Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!

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.

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!

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.