[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:07.00,Default,,0000,0000,0000,,Até agora, nós modificamos um monte\Nde elementos existentes na página.
Dialogue: 0,0:00:07.00,0:00:10.26,Default,,0000,0000,0000,,Mas e se quiséssemos adicionar\Nnovos elementos na página?
Dialogue: 0,0:00:10.26,0:00:14.100,Default,,0000,0000,0000,,Poderíamos fazer isso com '{\i1}innerHTML{\i0}',\Nescrevendo o {\i1}HTML{\i0} para as tags
Dialogue: 0,0:00:14.100,0:00:19.07,Default,,0000,0000,0000,,dentro da cadeia de caracteres que\Npassamos, como fizemos aqui.
Dialogue: 0,0:00:19.07,0:00:22.26,Default,,0000,0000,0000,,Isso pode ficar um pouco bagunçado,\Nespecialmente se você quer criar
Dialogue: 0,0:00:22.26,0:00:25.54,Default,,0000,0000,0000,,múltiplas tags com diferentes\Natributos, estilos e classes.
Dialogue: 0,0:00:25.90,0:00:31.10,Default,,0000,0000,0000,,Então, em vez disso, podemos usar um\Nconjunto inteiro de métodos de documento
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,para criar novos elementos do zero\Ne adicioná-los na página.
Dialogue: 0,0:00:36.27,0:00:40.88,Default,,0000,0000,0000,,Vamos dizer que queremos adicionar\Numa imagem de um gato na página
Dialogue: 0,0:00:40.88,0:00:44.02,Default,,0000,0000,0000,,porque nós não achamos\Nque tem o suficiente ainda.
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,O primeiro passo é criar esse\Nnovo elemento '{\i1}< img >{\i0}' , certo?
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,Nós queremos criá-lo.
Dialogue: 0,0:00:50.79,0:00:55.98,Default,,0000,0000,0000,,Então vamos começar criando\Numa variável para guardá-lo, {\i1}catEl{\i0}
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,E então vamos usar\N{\i1}document.createElement{\i0}
Dialogue: 0,0:01:00.94,0:01:06.62,Default,,0000,0000,0000,,e passar o nome da tag\Nque estamos criando, {\i1}img{\i0}.
Dialogue: 0,0:01:06.62,0:01:11.96,Default,,0000,0000,0000,,Então agora você pode imaginar que\No navegador fez uma tag de imagem, assim.
Dialogue: 0,0:01:11.96,0:01:15.07,Default,,0000,0000,0000,,E está flutuando no espaço em algum lugar.
Dialogue: 0,0:01:15.65,0:01:19.11,Default,,0000,0000,0000,,Próximo passo é atribuir uma fonte a ele.
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,Então, {\i1}catEl.src{\i0} é igual a...
Dialogue: 0,0:01:23.31,0:01:29.38,Default,,0000,0000,0000,,e vamos pegar nossa fonte daqui de cima.
Dialogue: 0,0:01:30.96,0:01:34.76,Default,,0000,0000,0000,,- deveríamos adiciona um {\i1}alt{\i0} para fazer\Nessa imagem mais acessível -
Dialogue: 0,0:01:34.76,0:01:41.53,Default,,0000,0000,0000,,não andei fazendo isso, mas deveria\Nsempre ter {\i1}alt{\i0} tags em nossas imagens.
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,Então agora você pode imaginar que essa\Ntag '{\i1}< image >{\i0}' que nós fizemos
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,tem um '{\i1}src{\i0}' e também tem\Num '{\i1}alt = "Foto de um gato fofo"{\i0}.
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,Então isso é o que fizemos\Nusando JavaScript aqui.
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,A tag '{\i1}< img >{\i0}' que fizemos\Nainda está flutuando no espaço
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,porque nós não dissemos\Nao navegar onde colocá-la.
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,E há tantos lugares diferentes\Nem nosso DOM em que ela poderia ir.
Dialogue: 0,0:02:15.83,0:02:21.34,Default,,0000,0000,0000,,Vamos fazer a coisa mais fácil e apenas\Nfazer ela aparecer no final da página.
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,Podemos fazer isso colocando ela\Nno final da tag '{\i1}< body >{\i0}', então dizemos:
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,{\i1}document.body.appendChild(catEl);{\i0}
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,Aí está ela!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,É bem grande também.
Dialogue: 0,0:02:32.71,0:02:35.08,Default,,0000,0000,0000,,Gato muito grande - assustador.
Dialogue: 0,0:02:35.20,0:02:41.20,Default,,0000,0000,0000,,Você pode chamar '{\i1}appendChild{\i0}' em\Nqualquer nó DOM existente em sua página
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,e isso fará o elemento passado\No filho final desse nó.
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,Isso é onde realmente ajuda\Nvisualizar o DOM como uma árvore.
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,A tag '{\i1}< body >{\i0}' é um nó nessa árvore\Ne tem um monte de filhos
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,como '{\i1}< h1 >{\i0}' e '{\i1}< p1 >{\i0}'
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,e você está adicionando mais\Num filho no final de seus filhos.
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,Então, na verdade, ela estaria depois\Nda tag '{\i1}< script >{\i0}', logo aqui.
Dialogue: 0,0:03:09.07,0:03:13.32,Default,,0000,0000,0000,,Usando métodos DOM, você deveria em teoria\Nser capaz de adicionar elementos
Dialogue: 0,0:03:13.32,0:03:15.53,Default,,0000,0000,0000,,em qualquer lugar dentro da árvore DOM.
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,Apenas colocamos no lugar\Nmais fácil e mais óbvio.
Dialogue: 0,0:03:19.71,0:03:22.02,Default,,0000,0000,0000,,Vamos fazer mais um exemplo.
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,Usamos '{\i1}innerHTL{\i0}' aqui embaixo para pôr\Na tag '{\i1}< strong >{\i0}' dentro de '{\i1}< span >{\i0}'.
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,Em vez disso, poderíamos\Nusar '{\i1}createElement{\i0}'.
Dialogue: 0,0:03:31.44,0:03:39.64,Default,,0000,0000,0000,,{\i1}var strongEl = \Ndocument.createElement("strong");{\i0}
Dialogue: 0,0:03:39.64,0:03:43.82,Default,,0000,0000,0000,,E eu escrevi errado\Ne a grafia é muito importante.
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,Então isso cria uma tag '{\i1}< strong >{\i0}'\Nvazia, flutuando no espaço.
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,Então, a primeira coisa que vamos\Nfazer é definir o seu texto.
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,{\i1}strongEl.textContent = "cat";{\i0}
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,Certo?
Dialogue: 0,0:03:58.02,0:04:01.82,Default,,0000,0000,0000,,Alternativamente, na verdade,\Npoderíamos fazer essa coisa onde
Dialogue: 0,0:04:01.82,0:04:04.58,Default,,0000,0000,0000,,criamos o que é conhecido\Ncomo um '{\i1}textNode{\i0}'.
Dialogue: 0,0:04:04.58,0:04:09.32,Default,,0000,0000,0000,,Muitos nós DOM na árvore DOM podem\Nter tipos especiais de nós, '{\i1}textNode{\i0}'s,
Dialogue: 0,0:04:09.32,0:04:10.73,Default,,0000,0000,0000,,como seus filhos.
Dialogue: 0,0:04:10.73,0:04:14.100,Default,,0000,0000,0000,,E esses nós não são elementos mas\Neles ainda são nós na árvore DOM.
Dialogue: 0,0:04:14.100,0:04:17.54,Default,,0000,0000,0000,,Nós chamamos eles de \N"nós folhas" porque eles são
Dialogue: 0,0:04:17.54,0:04:20.08,Default,,0000,0000,0000,,a última coisa mesmo\Nque pode ter em uma árvore.
Dialogue: 0,0:04:20.08,0:04:27.54,Default,,0000,0000,0000,,{\i1}var strongText = \Ndocument.createTextNode("cat");{\i0}
Dialogue: 0,0:04:27.54,0:04:31.82,Default,,0000,0000,0000,,E vamos apenas passar o texto, "cat".
Dialogue: 0,0:04:31.82,0:04:34.50,Default,,0000,0000,0000,,Se usarmos essa técnica, nós agora
Dialogue: 0,0:04:34.50,0:04:42.17,Default,,0000,0000,0000,,criamos dois nós que estão flutuando\Nno espaço: uma tag '{\i1}< strong >{\i0}'
Dialogue: 0,0:04:42.17,0:04:46.55,Default,,0000,0000,0000,,e então esse '{\i1}textNode{\i0}',\Nque apenas diz "cat".
Dialogue: 0,0:04:46.55,0:04:49.68,Default,,0000,0000,0000,,E nós precisamos conectá-los um ao outro.
Dialogue: 0,0:04:49.68,0:04:54.91,Default,,0000,0000,0000,,E queremos a tag '{\i1}< strong >{\i0}'\Npara ser o pai de "cat".
Dialogue: 0,0:04:54.91,0:05:03.15,Default,,0000,0000,0000,,Então o que vamos fazer é dizer\N'{\i1}strongEl.appendChild(strongText);{\i0}'
Dialogue: 0,0:05:03.15,0:05:12.11,Default,,0000,0000,0000,,Então agora nós temos a tag\N'{\i1}< strong >{\i0}' com "cat" dentro,
Dialogue: 0,0:05:12.11,0:05:18.58,Default,,0000,0000,0000,,e temos que colocá-la onde queremos\Nporque ela ainda está flutuando no espaço.
Dialogue: 0,0:05:18.58,0:05:24.53,Default,,0000,0000,0000,,Nós estamos dentro do loop {\i1}for{\i0}\Npara '{\i1}nameEls{\i0}', e cada '{\i1}nameEl{\i0}'
Dialogue: 0,0:05:24.53,0:05:27.35,Default,,0000,0000,0000,,está onde queremos colocar\Na tag '{\i1}< strong >{\i0}'.
Dialogue: 0,0:05:27.35,0:05:34.98,Default,,0000,0000,0000,,Então aqui,\N'{\i1}nameEls[i].appendChild(strongEl);{\i0}'
Dialogue: 0,0:05:34.98,0:05:42.20,Default,,0000,0000,0000,,E agora nós vemos duplicado\Nporque eu deixei o jeito antigo.
Dialogue: 0,0:05:42.20,0:05:47.34,Default,,0000,0000,0000,,Ali está adicionando à tag '{\i1}< span >{\i0}'\Nque já tem uma tag '{\i1}< strong >{\i0}' nela.
Dialogue: 0,0:05:47.34,0:05:52.43,Default,,0000,0000,0000,,Poderíamos mudar essa linha para\N'{\i1}innerHTML{\i0}' é igual a uma {\i1}string{\i0} vazia
Dialogue: 0,0:05:52.43,0:05:57.82,Default,,0000,0000,0000,,que vai efetivamente limpar a {\i1}span{\i0}\Nantes de adicionarmos a ela.
Dialogue: 0,0:05:57.82,0:06:04.92,Default,,0000,0000,0000,,Agora como você viu, isso levou muito mais\Nlinhas de código que a versão '{\i1}innerHTML{\i0}'.
Dialogue: 0,0:06:04.92,0:06:06.99,Default,,0000,0000,0000,,Então, por quê fizemos isso?
Dialogue: 0,0:06:06.99,0:06:10.79,Default,,0000,0000,0000,,Bem, muitos desenvolvedores não gostam\Nde modificar o documento desse jeito
Dialogue: 0,0:06:10.79,0:06:13.43,Default,,0000,0000,0000,,porque precisa de muito mais código.
Dialogue: 0,0:06:13.73,0:06:16.71,Default,,0000,0000,0000,,A maioria dos desenvolvedores usa\Nbibliotecas, como jQuery,
Dialogue: 0,0:06:16.71,0:06:21.35,Default,,0000,0000,0000,,para fazer modificações no DOM por eles,\No que provê funções que
Dialogue: 0,0:06:21.35,0:06:26.87,Default,,0000,0000,0000,,fazem o mesmo código com muito menos\Nlinhas para você como o desenvolvedor
Dialogue: 0,0:06:26.87,0:06:29.81,Default,,0000,0000,0000,,porque você está usando as\Nfunções da biblioteca no lugar.
Dialogue: 0,0:06:29.81,0:06:33.50,Default,,0000,0000,0000,,Gosto de escrever meu código desse jeito\Nporque eu gosto de poder
Dialogue: 0,0:06:33.50,0:06:38.67,Default,,0000,0000,0000,,ver exatamente como estou modificando\Na árvore DOM, uma linha por vez.
Dialogue: 0,0:06:38.67,0:06:43.04,Default,,0000,0000,0000,,E me parece mais limpo que empurrar tudo\Ndentro de uma {\i1}string{\i0} de {\i1}innerHTML{\i0}.
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,Mas talvez você odeie.
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,De qualquer forma, agora\Nvocê sabe que existe.
Dialogue: 0,0:06:47.19,0:06:50.94,Default,,0000,0000,0000,,Então você pode usar se precisar\Ne você consegue entender
Dialogue: 0,0:06:50.94,0:06:54.37,Default,,0000,0000,0000,,o que bibliotecas como jQuery estão\Nrealmente fazendo por trás dos panos.
Dialogue: 0,0:06:54.37,0:06:56.00,Default,,0000,0000,0000,,[Legendado por: Alberto Oliveira]\N[Revisado por: Fernando dos Reis]