1
00:00:01,040 --> 00:00:06,750
Daqui para frente, você vai me 
ouvir dizer muito esta sigla: DOM.

2
00:00:09,978 --> 00:00:15,502
DOM é a sigla para Modelo de
Objeto de Documento,

3
00:00:15,502 --> 00:00:18,907
e é a forma com a qual os navegadores
deixa nós desenvolvedores

4
00:00:18,907 --> 00:00:21,637
manipularmos páginas de
internet com JavaScript.

5
00:00:21,637 --> 00:00:23,776
Sempre que um navegador
carrega uma página,


6
00:00:23,776 --> 00:00:26,706
ele analisa todo o HTML e CSS,

7
00:00:26,706 --> 00:00:30,238
e converte o documento
em um DOM.

8
00:00:30,238 --> 00:00:33,849
Esse DOM é de fato um
objeto JavaScript grande,

9
00:00:33,849 --> 00:00:37,381
que contém tudo o que quisermos
saber ou mudar em uma página,

10
00:00:37,381 --> 00:00:43,050
como cada <i>tag</i>, atributo
e estilo para cada <i>tag</i>.

11
00:00:43,050 --> 00:00:46,953
Para acessar o DOM em uma 
página a partir do JavaScript,

12
00:00:46,953 --> 00:00:52,750
usamos a variável global <i>document</i>,
e depois podemos usar propriedades

13
00:00:52,750 --> 00:00:57,396
e chamar funções que estão
vinculadas a esse objeto aqui.

14
00:00:57,396 --> 00:01:04,179
A estratégia geral para a manipulação
do DOM consiste em dois passos.

15
00:01:04,179 --> 00:01:09,489
Deixe-me fazer uma
lista delas aqui.

16
00:01:09,489 --> 00:01:14,753
Aí está, e depois temos
o segundo passo.

17
00:01:14,753 --> 00:01:17,503
Vamos passar por cada um
desses dois passos agora.

18
00:01:17,503 --> 00:01:23,439
O primeiro passo é encontrar o nó do
DOM usando um método de acesso.

19
00:01:23,439 --> 00:01:25,994
Se estivermos procurando
pela <i>tag</i> <i>< body ></i>

20
00:01:25,994 --> 00:01:28,990
então podemos acessá-la
bem facilmente

21
00:01:28,990 --> 00:01:33,336
apenas usando <i>document.body</i>

22
00:01:33,336 --> 00:01:38,904
E o segundo passo é a manipulação
do nó que selecionamos

23
00:01:38,904 --> 00:01:43,245
mudando seus atributos, estilos,
HTML interno

24
00:01:43,245 --> 00:01:45,818
ou anexando novos nós a ele, ...

25
00:01:45,818 --> 00:01:50,193
Se quisermos apenas substituir
o conteúdo inteiro da <i>tag</i>,

26
00:01:50,193 --> 00:01:53,439
então podemos usar a
propriedade <i>innerHTML</i>.

27
00:01:53,439 --> 00:01:58,774
Neste caso: <i>document.body.innerHTML</i> = 
"Webpage be gone!";

28
00:01:59,994 --> 00:02:01,364
Consegui!

29
00:02:01,854 --> 00:02:06,180
O navegador está observando as
alterações no objeto <i>document</i>,

30
00:02:06,180 --> 00:02:09,978
e assim que ele vê você alterar o
HTML interno de <i>document.body</i>

31
00:02:09,978 --> 00:02:13,369
ele reflete a mudança no
documento de fato.

32
00:02:13,369 --> 00:02:17,629
Lembre-se, o objeto <i>document</i> não
é a página de verdade,

33
00:02:17,629 --> 00:02:23,634
mas o navegador tenta fazê-lo refletir a
página atual tanto quanto possível.

34
00:02:24,054 --> 00:02:28,843
Existem muitas maneiras
de realizar o passo um,

35
00:02:28,843 --> 00:02:32,842
porque usualmente você quer encontrar
alguma coisa além da <i>tag body</i>.


36
00:02:32,842 --> 00:02:35,500
Talvez você queira encontrar uma 
<i>tag</i> com um certo <i>ID</i>

37
00:02:35,500 --> 00:02:37,535
ou todas as <i>tags</i> de um certo tipo.

38
00:02:37,535 --> 00:02:41,521
Isso é o que vamos falar no tutorial
de métodos de acesso do DOM.

39
00:02:41,521 --> 00:02:45,441
Há também um monte de coisas legais
que você pode fazer no passo dois,

40
00:02:45,441 --> 00:02:48,615
como mudar os atributos ou estilos
das <i>tags</i> que você selecionar.

41
00:02:48,615 --> 00:02:52,562
Falaremos de tudo isso no tutorial
de modificação do DOM.

42
00:02:52,562 --> 00:02:56,358
Tendo dominado o acesso e
manipulação do DOM

43
00:02:56,358 --> 00:02:59,051
veremos formas divertidas de usá-los,

44
00:02:59,051 --> 00:03:03,042
como quando responder a eventos
de usuários ou fazer animações.

45
00:03:03,042 --> 00:03:06,775
Neste momento, é um pouco bobo
usar o JavaScript para fazer

46
00:03:06,775 --> 00:03:09,852
o que poderíamos fazer apenas
usando o HTML de início,

47
00:03:09,852 --> 00:03:14,552
mas acredite, você vai querer dominar
o acesso e modificação do DOM

48
00:03:14,552 --> 00:03:19,030
para fazer experiências interativas
completas mais tarde.

49
00:03:19,030 --> 00:03:21,775
Então, continue assistindo, e até mais.

50
00:03:21,775 --> 00:03:25,812
Legendado por [Carlos A. N. C. R.]
Revisado por [Fernando dos Reis]