Na aula anterior, entendemos como funcionam os eventos, os event handlers e o objeto event.
Agora vamos responder uma dúvida muito comum:
Quando exatamente o JavaScript pode começar a manipular o DOM?
Para isso, precisamos entender dois eventos importantes:
DOMContentLoadedload
🎯 Objetivo da aula
Ao final desta aula, você será capaz de:
- Entender o processo de carregamento da página
- Saber a diferença entre
DOMContentLoadedeload - Escolher o evento certo para cada situação
- Evitar erros de DOM não carregado
O que acontece quando a página carrega?
Quando o navegador abre uma página, ele segue alguns passos:
- Carrega o HTML
- Constrói o DOM
- Carrega arquivos externos (imagens, CSS, fontes)
- Finaliza o carregamento
Os eventos DOMContentLoaded e load acontecem em momentos diferentes desse processo.
O evento DOMContentLoaded
O DOMContentLoaded é disparado quando:
- Todo o HTML foi carregado
- O DOM foi construído
Ele não espera:
- Imagens
- CSS
- Fontes
Exemplo com DOMContentLoaded
document.addEventListener("DOMContentLoaded", function ()
{
const titulo = document.getElementById("titulo");
titulo.textContent = "DOM pronto!";
}); Aqui garantimos que o elemento já existe no DOM.
O evento load
O evento load é disparado quando:
- HTML foi carregado
- DOM foi construído
- Imagens foram carregadas
- CSS foi carregado
- Fontes foram carregadas
Ou seja: quando tudo está completamente pronto.
Exemplo com load
window.addEventListener("load", function () { console.log("Página totalmente carregada"); }); console.log("Página totalmente carregada"); // Saída será exibida após todos os recursos carregarem Qual devo usar?
Na maioria dos casos:
Ele é mais rápido e suficiente para:
- Manipular DOM
- Adicionar eventos
- Criar elementos dinamicamente
Quando usar load?
Use load quando você precisa:
- Saber o tamanho real de imagens
- Trabalhar com canvas
- Depender de fontes carregadas
E se o script estiver no final do HTML?
Se o script estiver antes de </body>, o DOM já estará carregado.
Nesse caso, muitas vezes nem é necessário usar eventos de carregamento.
DOMContentLoaded por segurança. Resumo comparativo
- DOMContentLoaded → DOM pronto
- load → tudo pronto
- DOMContentLoaded é mais rápido
- load é mais completo
Resumo da aula para nunca mais esquecer
DOMContentLoadedindica que o DOM está prontoloadespera todos os recursos- Use o evento certo para cada cenário
- Evite manipular o DOM antes do carregamento
- Essencial para evitar bugs silenciosos
Na próxima aula, vamos estudar os eventos de mouse em detalhes.
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.
Você Sabia?
Mario e seu bigode
O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.
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.
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.
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique 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.










