O DOM (Versão em Vídeo)

Esta é uma gravação em vídeo de uma conversa, carregada para tornar mais fácil a criação de legendas.
Por favor assista ao vídeo interativo original no Khan Academy, onde você pode pausar e editar o código e ver o código em uma resolução melhor:
http://www.khanacademy.org/computer-programming

Daqui para frente, você vai me
ouvir dizer muito esta sigla: DOM.

DOM é a sigla para Modelo de
Objeto de Documento,

e é a forma com a qual os navegadores
deixa nós desenvolvedores

manipularmos páginas de
internet com JavaScript.

Sempre que um navegador
carrega uma página,

ele analisa todo o HTML e CSS,

e converte o documento
em um DOM.

Esse DOM é de fato um
objeto JavaScript grande,

que contém tudo o que quisermos
saber ou mudar em uma página,

como cada tag, atributo
e estilo para cada tag.

Para acessar o DOM em uma
página a partir do JavaScript,

usamos a variável global document,
e depois podemos usar propriedades

e chamar funções que estão
vinculadas a esse objeto aqui.

A estratégia geral para a manipulação
do DOM consiste em dois passos.

Deixe-me fazer uma
lista delas aqui.

Aí está, e depois temos
o segundo passo.

Vamos passar por cada um
desses dois passos agora.

O primeiro passo é encontrar o nó do
DOM usando um método de acesso.

Se estivermos procurando
pela tag < body >

então podemos acessá-la
bem facilmente

apenas usando document.body

E o segundo passo é a manipulação
do nó que selecionamos

mudando seus atributos, estilos,
HTML interno

ou anexando novos nós a ele, ...

Se quisermos apenas substituir
o conteúdo inteiro da tag,

então podemos usar a
propriedade innerHTML.

Neste caso: document.body.innerHTML =
"Webpage be gone!";

Consegui!

O navegador está observando as
alterações no objeto document,

e assim que ele vê você alterar o
HTML interno de document.body

ele reflete a mudança no
documento de fato.

Lembre-se, o objeto document não
é a página de verdade,

mas o navegador tenta fazê-lo refletir a
página atual tanto quanto possível.

Existem muitas maneiras
de realizar o passo um,

porque usualmente você quer encontrar
alguma coisa além da tag body.

Talvez você queira encontrar uma
tag com um certo ID

ou todas as tags de um certo tipo.

Isso é o que vamos falar no tutorial
de métodos de acesso do DOM.

Há também um monte de coisas legais
que você pode fazer no passo dois,

como mudar os atributos ou estilos
das tags que você selecionar.

Falaremos de tudo isso no tutorial
de modificação do DOM.

Tendo dominado o acesso e
manipulação do DOM

veremos formas divertidas de usá-los,

como quando responder a eventos
de usuários ou fazer animações.

Neste momento, é um pouco bobo
usar o JavaScript para fazer

o que poderíamos fazer apenas
usando o HTML de início,

mas acredite, você vai querer dominar
o acesso e modificação do DOM

para fazer experiências interativas
completas mais tarde.

Então, continue assistindo, e até mais.

Legendado por [Carlos A. N. C. R.]
Revisado por [Fernando dos Reis]