O que é o DOM e como o JavaScript usa essa estrutura para interagir com a página
O DOM (Document Object Model) é a representação da página HTML como uma árvore de objetos. Quando o navegador carrega uma página, ele lê o HTML e cria essa estrutura em memória. O JavaScript acessa e modifica o DOM para alterar a página em tempo real.
document
└── html
├── head
│ └── title
└── body
├── h1
├── p
└── div
└── button
Cada elemento HTML vira um nó nessa árvore. O JavaScript pode selecionar qualquer nó, ler ou alterar seu conteúdo, seus atributos e seu estilo.
O ponto de entrada para o DOM é o objeto document. Ele representa o documento inteiro e oferece os métodos para selecionar elementos.
Carregando...Com o DOM, o JavaScript consegue:
Tudo isso sem recarregar a página.
O DOM é criado a partir do HTML, mas não é o HTML. Quando o JavaScript altera o DOM, o arquivo HTML original não muda. A alteração existe apenas na memória do navegador durante aquela sessão.