[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.04,0:00:06.75,Default,,0000,0000,0000,,Daqui para frente, você vai me \Nouvir dizer muito esta sigla: DOM.
Dialogue: 0,0:00:09.98,0:00:15.50,Default,,0000,0000,0000,,DOM é a sigla para Modelo de\NObjeto de Documento,
Dialogue: 0,0:00:15.50,0:00:18.91,Default,,0000,0000,0000,,e é a forma com a qual os navegadores\Ndeixa nós desenvolvedores
Dialogue: 0,0:00:18.91,0:00:21.64,Default,,0000,0000,0000,,manipularmos páginas de\Ninternet com JavaScript.
Dialogue: 0,0:00:21.64,0:00:23.78,Default,,0000,0000,0000,,Sempre que um navegador\Ncarrega uma página,\N
Dialogue: 0,0:00:23.78,0:00:26.71,Default,,0000,0000,0000,,ele analisa todo o HTML e CSS,
Dialogue: 0,0:00:26.71,0:00:30.24,Default,,0000,0000,0000,,e converte o documento\Nem um DOM.
Dialogue: 0,0:00:30.24,0:00:33.85,Default,,0000,0000,0000,,Esse DOM é de fato um\Nobjeto JavaScript grande,
Dialogue: 0,0:00:33.85,0:00:37.38,Default,,0000,0000,0000,,que contém tudo o que quisermos\Nsaber ou mudar em uma página,
Dialogue: 0,0:00:37.38,0:00:43.05,Default,,0000,0000,0000,,como cada {\i1}tag{\i0}, atributo\Ne estilo para cada {\i1}tag{\i0}.
Dialogue: 0,0:00:43.05,0:00:46.95,Default,,0000,0000,0000,,Para acessar o DOM em uma \Npágina a partir do JavaScript,
Dialogue: 0,0:00:46.95,0:00:52.75,Default,,0000,0000,0000,,usamos a variável global {\i1}document{\i0},\Ne depois podemos usar propriedades
Dialogue: 0,0:00:52.75,0:00:57.40,Default,,0000,0000,0000,,e chamar funções que estão\Nvinculadas a esse objeto aqui.
Dialogue: 0,0:00:57.40,0:01:04.18,Default,,0000,0000,0000,,A estratégia geral para a manipulação\Ndo DOM consiste em dois passos.
Dialogue: 0,0:01:04.18,0:01:09.49,Default,,0000,0000,0000,,Deixe-me fazer uma\Nlista delas aqui.
Dialogue: 0,0:01:09.49,0:01:14.75,Default,,0000,0000,0000,,Aí está, e depois temos\No segundo passo.
Dialogue: 0,0:01:14.75,0:01:17.50,Default,,0000,0000,0000,,Vamos passar por cada um\Ndesses dois passos agora.
Dialogue: 0,0:01:17.50,0:01:23.44,Default,,0000,0000,0000,,O primeiro passo é encontrar o nó do\NDOM usando um método de acesso.
Dialogue: 0,0:01:23.44,0:01:25.99,Default,,0000,0000,0000,,Se estivermos procurando\Npela {\i1}tag{\i0} {\i1}< body >{\i0}
Dialogue: 0,0:01:25.99,0:01:28.99,Default,,0000,0000,0000,,então podemos acessá-la\Nbem facilmente
Dialogue: 0,0:01:28.99,0:01:33.34,Default,,0000,0000,0000,,apenas usando {\i1}document.body{\i0}
Dialogue: 0,0:01:33.34,0:01:38.90,Default,,0000,0000,0000,,E o segundo passo é a manipulação\Ndo nó que selecionamos
Dialogue: 0,0:01:38.90,0:01:43.24,Default,,0000,0000,0000,,mudando seus atributos, estilos,\NHTML interno
Dialogue: 0,0:01:43.24,0:01:45.82,Default,,0000,0000,0000,,ou anexando novos nós a ele, ...
Dialogue: 0,0:01:45.82,0:01:50.19,Default,,0000,0000,0000,,Se quisermos apenas substituir\No conteúdo inteiro da {\i1}tag{\i0},
Dialogue: 0,0:01:50.19,0:01:53.44,Default,,0000,0000,0000,,então podemos usar a\Npropriedade {\i1}innerHTML{\i0}.
Dialogue: 0,0:01:53.44,0:01:58.77,Default,,0000,0000,0000,,Neste caso: {\i1}document.body.innerHTML{\i0} = \N"Webpage be gone!";
Dialogue: 0,0:01:59.99,0:02:01.36,Default,,0000,0000,0000,,Consegui!
Dialogue: 0,0:02:01.85,0:02:06.18,Default,,0000,0000,0000,,O navegador está observando as\Nalterações no objeto {\i1}document{\i0},
Dialogue: 0,0:02:06.18,0:02:09.98,Default,,0000,0000,0000,,e assim que ele vê você alterar o\NHTML interno de {\i1}document.body{\i0}
Dialogue: 0,0:02:09.98,0:02:13.37,Default,,0000,0000,0000,,ele reflete a mudança no\Ndocumento de fato.
Dialogue: 0,0:02:13.37,0:02:17.63,Default,,0000,0000,0000,,Lembre-se, o objeto {\i1}document{\i0} não\Né a página de verdade,
Dialogue: 0,0:02:17.63,0:02:23.63,Default,,0000,0000,0000,,mas o navegador tenta fazê-lo refletir a\Npágina atual tanto quanto possível.
Dialogue: 0,0:02:24.05,0:02:28.84,Default,,0000,0000,0000,,Existem muitas maneiras\Nde realizar o passo um,
Dialogue: 0,0:02:28.84,0:02:32.84,Default,,0000,0000,0000,,porque usualmente você quer encontrar\Nalguma coisa além da {\i1}tag body{\i0}.\N
Dialogue: 0,0:02:32.84,0:02:35.50,Default,,0000,0000,0000,,Talvez você queira encontrar uma \N{\i1}tag{\i0} com um certo {\i1}ID{\i0}
Dialogue: 0,0:02:35.50,0:02:37.54,Default,,0000,0000,0000,,ou todas as {\i1}tags{\i0} de um certo tipo.
Dialogue: 0,0:02:37.54,0:02:41.52,Default,,0000,0000,0000,,Isso é o que vamos falar no tutorial\Nde métodos de acesso do DOM.
Dialogue: 0,0:02:41.52,0:02:45.44,Default,,0000,0000,0000,,Há também um monte de coisas legais\Nque você pode fazer no passo dois,
Dialogue: 0,0:02:45.44,0:02:48.62,Default,,0000,0000,0000,,como mudar os atributos ou estilos\Ndas {\i1}tags{\i0} que você selecionar.
Dialogue: 0,0:02:48.62,0:02:52.56,Default,,0000,0000,0000,,Falaremos de tudo isso no tutorial\Nde modificação do DOM.
Dialogue: 0,0:02:52.56,0:02:56.36,Default,,0000,0000,0000,,Tendo dominado o acesso e\Nmanipulação do DOM
Dialogue: 0,0:02:56.36,0:02:59.05,Default,,0000,0000,0000,,veremos formas divertidas de usá-los,
Dialogue: 0,0:02:59.05,0:03:03.04,Default,,0000,0000,0000,,como quando responder a eventos\Nde usuários ou fazer animações.
Dialogue: 0,0:03:03.04,0:03:06.78,Default,,0000,0000,0000,,Neste momento, é um pouco bobo\Nusar o JavaScript para fazer
Dialogue: 0,0:03:06.78,0:03:09.85,Default,,0000,0000,0000,,o que poderíamos fazer apenas\Nusando o HTML de início,
Dialogue: 0,0:03:09.85,0:03:14.55,Default,,0000,0000,0000,,mas acredite, você vai querer dominar\No acesso e modificação do DOM
Dialogue: 0,0:03:14.55,0:03:19.03,Default,,0000,0000,0000,,para fazer experiências interativas\Ncompletas mais tarde.
Dialogue: 0,0:03:19.03,0:03:21.78,Default,,0000,0000,0000,,Então, continue assistindo, e até mais.
Dialogue: 0,0:03:21.78,0:03:25.81,Default,,0000,0000,0000,,Legendado por [Carlos A. N. C. R.]\NRevisado por [Fernando dos Reis]