WEBVTT

00:00:01.040 --> 00:00:06.750
Daqui para frente, você vai me 
ouvir dizer muito esta sigla: DOM.

00:00:09.978 --> 00:00:15.502
DOM é a sigla para Modelo de
Objeto de Documento,

00:00:15.502 --> 00:00:18.907
e é a forma com a qual os navegadores
deixa nós desenvolvedores

00:00:18.907 --> 00:00:21.637
manipularmos páginas de
internet com JavaScript.

00:00:21.637 --> 00:00:23.776
Sempre que um navegador
carrega uma página,


00:00:23.776 --> 00:00:26.706
ele analisa todo o HTML e CSS,

00:00:26.706 --> 00:00:30.238
e converte o documento
em um DOM.

00:00:30.238 --> 00:00:33.849
Esse DOM é de fato um
objeto JavaScript grande,

00:00:33.849 --> 00:00:37.381
que contém tudo o que quisermos
saber ou mudar em uma página,

00:00:37.381 --> 00:00:43.050
como cada <i>tag</i>, atributo
e estilo para cada <i>tag</i>.

00:00:43.050 --> 00:00:46.953
Para acessar o DOM em uma 
página a partir do JavaScript,

00:00:46.953 --> 00:00:52.750
usamos a variável global <i>document</i>,
e depois podemos usar propriedades

00:00:52.750 --> 00:00:57.396
e chamar funções que estão
vinculadas a esse objeto aqui.

00:00:57.396 --> 00:01:04.179
A estratégia geral para a manipulação
do DOM consiste em dois passos.

00:01:04.179 --> 00:01:09.489
Deixe-me fazer uma
lista delas aqui.

00:01:09.489 --> 00:01:14.753
Aí está, e depois temos
o segundo passo.

00:01:14.753 --> 00:01:17.503
Vamos passar por cada um
desses dois passos agora.

00:01:17.503 --> 00:01:23.439
O primeiro passo é encontrar o nó do
DOM usando um método de acesso.

00:01:23.439 --> 00:01:25.994
Se estivermos procurando
pela <i>tag</i> <i>< body ></i>

00:01:25.994 --> 00:01:28.990
então podemos acessá-la
bem facilmente

00:01:28.990 --> 00:01:33.336
apenas usando <i>document.body</i>

00:01:33.336 --> 00:01:38.904
E o segundo passo é a manipulação
do nó que selecionamos

00:01:38.904 --> 00:01:43.245
mudando seus atributos, estilos,
HTML interno

00:01:43.245 --> 00:01:45.818
ou anexando novos nós a ele, ...

00:01:45.818 --> 00:01:50.193
Se quisermos apenas substituir
o conteúdo inteiro da <i>tag</i>,

00:01:50.193 --> 00:01:53.439
então podemos usar a
propriedade <i>innerHTML</i>.

00:01:53.439 --> 00:01:58.774
Neste caso: <i>document.body.innerHTML</i> = 
"Webpage be gone!";

00:01:59.994 --> 00:02:01.364
Consegui!

00:02:01.854 --> 00:02:06.180
O navegador está observando as
alterações no objeto <i>document</i>,

00:02:06.180 --> 00:02:09.978
e assim que ele vê você alterar o
HTML interno de <i>document.body</i>

00:02:09.978 --> 00:02:13.369
ele reflete a mudança no
documento de fato.

00:02:13.369 --> 00:02:17.629
Lembre-se, o objeto <i>document</i> não
é a página de verdade,

00:02:17.629 --> 00:02:23.634
mas o navegador tenta fazê-lo refletir a
página atual tanto quanto possível.

00:02:24.054 --> 00:02:28.843
Existem muitas maneiras
de realizar o passo um,

00:02:28.843 --> 00:02:32.842
porque usualmente você quer encontrar
alguma coisa além da <i>tag body</i>.


00:02:32.842 --> 00:02:35.500
Talvez você queira encontrar uma 
<i>tag</i> com um certo <i>ID</i>

00:02:35.500 --> 00:02:37.535
ou todas as <i>tags</i> de um certo tipo.

00:02:37.535 --> 00:02:41.521
Isso é o que vamos falar no tutorial
de métodos de acesso do DOM.

00:02:41.521 --> 00:02:45.441
Há também um monte de coisas legais
que você pode fazer no passo dois,

00:02:45.441 --> 00:02:48.615
como mudar os atributos ou estilos
das <i>tags</i> que você selecionar.

00:02:48.615 --> 00:02:52.562
Falaremos de tudo isso no tutorial
de modificação do DOM.

00:02:52.562 --> 00:02:56.358
Tendo dominado o acesso e
manipulação do DOM

00:02:56.358 --> 00:02:59.051
veremos formas divertidas de usá-los,

00:02:59.051 --> 00:03:03.042
como quando responder a eventos
de usuários ou fazer animações.

00:03:03.042 --> 00:03:06.775
Neste momento, é um pouco bobo
usar o JavaScript para fazer

00:03:06.775 --> 00:03:09.852
o que poderíamos fazer apenas
usando o HTML de início,

00:03:09.852 --> 00:03:14.552
mas acredite, você vai querer dominar
o acesso e modificação do DOM

00:03:14.552 --> 00:03:19.030
para fazer experiências interativas
completas mais tarde.

00:03:19.030 --> 00:03:21.775
Então, continue assistindo, e até mais.

00:03:21.775 --> 00:03:25.812
Legendado por [Carlos A. N. C. R.]
Revisado por [Fernando dos Reis]