0:00:01.040,0:00:06.750
Daqui para frente, você vai me [br]ouvir dizer muito esta sigla: DOM.
0:00:09.978,0:00:15.502
DOM é a sigla para Modelo de[br]Objeto de Documento,
0:00:15.502,0:00:18.907
e é a forma com a qual os navegadores[br]deixa nós desenvolvedores
0:00:18.907,0:00:21.637
manipularmos páginas de[br]internet com JavaScript.
0:00:21.637,0:00:23.776
Sempre que um navegador[br]carrega uma página,[br]
0:00:23.776,0:00:26.706
ele analisa todo o HTML e CSS,
0:00:26.706,0:00:30.238
e converte o documento[br]em um DOM.
0:00:30.238,0:00:33.849
Esse DOM é de fato um[br]objeto JavaScript grande,
0:00:33.849,0:00:37.381
que contém tudo o que quisermos[br]saber ou mudar em uma página,
0:00:37.381,0:00:43.050
como cada tag, atributo[br]e estilo para cada tag.
0:00:43.050,0:00:46.953
Para acessar o DOM em uma [br]página a partir do JavaScript,
0:00:46.953,0:00:52.750
usamos a variável global document,[br]e depois podemos usar propriedades
0:00:52.750,0:00:57.396
e chamar funções que estão[br]vinculadas a esse objeto aqui.
0:00:57.396,0:01:04.179
A estratégia geral para a manipulação[br]do DOM consiste em dois passos.
0:01:04.179,0:01:09.489
Deixe-me fazer uma[br]lista delas aqui.
0:01:09.489,0:01:14.753
Aí está, e depois temos[br]o segundo passo.
0:01:14.753,0:01:17.503
Vamos passar por cada um[br]desses dois passos agora.
0:01:17.503,0:01:23.439
O primeiro passo é encontrar o nó do[br]DOM usando um método de acesso.
0:01:23.439,0:01:25.994
Se estivermos procurando[br]pela tag < body >
0:01:25.994,0:01:28.990
então podemos acessá-la[br]bem facilmente
0:01:28.990,0:01:33.336
apenas usando document.body
0:01:33.336,0:01:38.904
E o segundo passo é a manipulação[br]do nó que selecionamos
0:01:38.904,0:01:43.245
mudando seus atributos, estilos,[br]HTML interno
0:01:43.245,0:01:45.818
ou anexando novos nós a ele, ...
0:01:45.818,0:01:50.193
Se quisermos apenas substituir[br]o conteúdo inteiro da tag,
0:01:50.193,0:01:53.439
então podemos usar a[br]propriedade innerHTML.
0:01:53.439,0:01:58.774
Neste caso: document.body.innerHTML = [br]"Webpage be gone!";
0:01:59.994,0:02:01.364
Consegui!
0:02:01.854,0:02:06.180
O navegador está observando as[br]alterações no objeto document,
0:02:06.180,0:02:09.978
e assim que ele vê você alterar o[br]HTML interno de document.body
0:02:09.978,0:02:13.369
ele reflete a mudança no[br]documento de fato.
0:02:13.369,0:02:17.629
Lembre-se, o objeto document não[br]é a página de verdade,
0:02:17.629,0:02:23.634
mas o navegador tenta fazê-lo refletir a[br]página atual tanto quanto possível.
0:02:24.054,0:02:28.843
Existem muitas maneiras[br]de realizar o passo um,
0:02:28.843,0:02:32.842
porque usualmente você quer encontrar[br]alguma coisa além da tag body.[br]
0:02:32.842,0:02:35.500
Talvez você queira encontrar uma [br]tag com um certo ID
0:02:35.500,0:02:37.535
ou todas as tags de um certo tipo.
0:02:37.535,0:02:41.521
Isso é o que vamos falar no tutorial[br]de métodos de acesso do DOM.
0:02:41.521,0:02:45.441
Há também um monte de coisas legais[br]que você pode fazer no passo dois,
0:02:45.441,0:02:48.615
como mudar os atributos ou estilos[br]das tags que você selecionar.
0:02:48.615,0:02:52.562
Falaremos de tudo isso no tutorial[br]de modificação do DOM.
0:02:52.562,0:02:56.358
Tendo dominado o acesso e[br]manipulação do DOM
0:02:56.358,0:02:59.051
veremos formas divertidas de usá-los,
0:02:59.051,0:03:03.042
como quando responder a eventos[br]de usuários ou fazer animações.
0:03:03.042,0:03:06.775
Neste momento, é um pouco bobo[br]usar o JavaScript para fazer
0:03:06.775,0:03:09.852
o que poderíamos fazer apenas[br]usando o HTML de início,
0:03:09.852,0:03:14.552
mas acredite, você vai querer dominar[br]o acesso e modificação do DOM
0:03:14.552,0:03:19.030
para fazer experiências interativas[br]completas mais tarde.
0:03:19.030,0:03:21.775
Então, continue assistindo, e até mais.
0:03:21.775,0:03:25.812
Legendado por [Carlos A. N. C. R.][br]Revisado por [Fernando dos Reis]