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 <i>tag</i>, atributo
e estilo para cada <i>tag</i>.

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

usamos a variável global <i>document</i>,
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 <i>tag</i> <i>< body ></i>

então podemos acessá-la
bem facilmente

apenas usando <i>document.body</i>

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 <i>tag</i>,

então podemos usar a
propriedade <i>innerHTML</i>.

Neste caso: <i>document.body.innerHTML</i> = 
"Webpage be gone!";

Consegui!

O navegador está observando as
alterações no objeto <i>document</i>,

e assim que ele vê você alterar o
HTML interno de <i>document.body</i>

ele reflete a mudança no
documento de fato.

Lembre-se, o objeto <i>document</i> 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 <i>tag body</i>.

Talvez você queira encontrar uma 
<i>tag</i> com um certo <i>ID</i>

ou todas as <i>tags</i> 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 <i>tags</i> 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]