WEBVTT
00:00:00.921 --> 00:00:07.003
Até agora, nós modificamos um monte
de elementos existentes na página.
00:00:07.003 --> 00:00:10.259
Mas e se quiséssemos adicionar
novos elementos na página?
00:00:10.259 --> 00:00:14.995
Poderíamos fazer isso com 'innerHTML',
escrevendo o HTML para as tags
00:00:14.995 --> 00:00:19.066
dentro da cadeia de caracteres que
passamos, como fizemos aqui.
00:00:19.066 --> 00:00:22.258
Isso pode ficar um pouco bagunçado,
especialmente se você quer criar
00:00:22.258 --> 00:00:25.540
múltiplas tags com diferentes
atributos, estilos e classes.
00:00:25.900 --> 00:00:31.097
Então, em vez disso, podemos usar um
conjunto inteiro de métodos de documento
00:00:31.097 --> 00:00:35.393
para criar novos elementos do zero
e adicioná-los na página.
00:00:36.273 --> 00:00:40.885
Vamos dizer que queremos adicionar
uma imagem de um gato na página
00:00:40.885 --> 00:00:44.018
porque nós não achamos
que tem o suficiente ainda.
00:00:44.018 --> 00:00:48.620
O primeiro passo é criar esse
novo elemento '< img >' , certo?
00:00:48.620 --> 00:00:50.786
Nós queremos criá-lo.
00:00:50.786 --> 00:00:55.980
Então vamos começar criando
uma variável para guardá-lo, catEl
00:00:55.980 --> 00:01:00.935
E então vamos usar
document.createElement
00:01:00.935 --> 00:01:06.615
e passar o nome da tag
que estamos criando, img.
00:01:06.615 --> 00:01:11.965
Então agora você pode imaginar que
o navegador fez uma tag de imagem, assim.
00:01:11.965 --> 00:01:15.069
E está flutuando no espaço em algum lugar.
00:01:15.649 --> 00:01:19.111
Próximo passo é atribuir uma fonte a ele.
00:01:19.111 --> 00:01:23.308
Então, catEl.src é igual a...
00:01:23.308 --> 00:01:29.376
e vamos pegar nossa fonte daqui de cima.
00:01:30.956 --> 00:01:34.764
- deveríamos adiciona um alt para fazer
essa imagem mais acessível -
00:01:34.764 --> 00:01:41.531
não andei fazendo isso, mas deveria
sempre ter alt tags em nossas imagens.
00:01:42.081 --> 00:01:47.178
Então agora você pode imaginar que essa
tag '< image >' que nós fizemos
00:01:47.178 --> 00:01:58.144
tem um 'src' e também tem
um 'alt = "Foto de um gato fofo".
00:01:58.144 --> 00:02:04.928
Então isso é o que fizemos
usando JavaScript aqui.
00:02:04.928 --> 00:02:08.983
A tag '< img >' que fizemos
ainda está flutuando no espaço
00:02:08.983 --> 00:02:11.764
porque nós não dissemos
ao navegar onde colocá-la.
00:02:11.764 --> 00:02:15.832
E há tantos lugares diferentes
em nosso DOM em que ela poderia ir.
00:02:15.832 --> 00:02:21.342
Vamos fazer a coisa mais fácil e apenas
fazer ela aparecer no final da página.
00:02:21.342 --> 00:02:26.304
Podemos fazer isso colocando ela
no final da tag '< body >', então dizemos:
00:02:26.304 --> 00:02:29.860
document.body.appendChild(catEl);
00:02:29.860 --> 00:02:31.197
Aí está ela!
00:02:31.197 --> 00:02:32.711
É bem grande também.
00:02:32.711 --> 00:02:35.079
Gato muito grande - assustador.
00:02:35.199 --> 00:02:41.198
Você pode chamar 'appendChild' em
qualquer nó DOM existente em sua página
00:02:41.198 --> 00:02:47.337
e isso fará o elemento passado
o filho final desse nó.
00:02:47.337 --> 00:02:52.115
Isso é onde realmente ajuda
visualizar o DOM como uma árvore.
00:02:52.115 --> 00:02:57.873
A tag '< body >' é um nó nessa árvore
e tem um monte de filhos
00:02:57.873 --> 00:03:00.076
como '< h1 >' e '< p1 >'
00:03:00.076 --> 00:03:04.395
e você está adicionando mais
um filho no final de seus filhos.
00:03:04.395 --> 00:03:09.074
Então, na verdade, ela estaria depois
da tag '< script >', logo aqui.
00:03:09.074 --> 00:03:13.320
Usando métodos DOM, você deveria em teoria
ser capaz de adicionar elementos
00:03:13.320 --> 00:03:15.531
em qualquer lugar dentro da árvore DOM.
00:03:15.531 --> 00:03:19.447
Apenas colocamos no lugar
mais fácil e mais óbvio.
00:03:19.707 --> 00:03:22.016
Vamos fazer mais um exemplo.
00:03:22.016 --> 00:03:28.283
Usamos 'innerHTL' aqui embaixo para pôr
a tag '< strong >' dentro de '< span >'.
00:03:28.283 --> 00:03:31.443
Em vez disso, poderíamos
usar 'createElement'.
00:03:31.443 --> 00:03:39.639
var strongEl =
document.createElement("strong");
00:03:39.639 --> 00:03:43.824
E eu escrevi errado
e a grafia é muito importante.
00:03:43.824 --> 00:03:48.663
Então isso cria uma tag '< strong >'
vazia, flutuando no espaço.
00:03:48.663 --> 00:03:51.879
Então, a primeira coisa que vamos
fazer é definir o seu texto.
00:03:51.879 --> 00:03:56.573
strongEl.textContent = "cat";
00:03:56.573 --> 00:03:57.746
Certo?
00:03:58.016 --> 00:04:01.816
Alternativamente, na verdade,
poderíamos fazer essa coisa onde
00:04:01.816 --> 00:04:04.581
criamos o que é conhecido
como um 'textNode'.
00:04:04.581 --> 00:04:09.324
Muitos nós DOM na árvore DOM podem
ter tipos especiais de nós, 'textNode's,
00:04:09.324 --> 00:04:10.726
como seus filhos.
00:04:10.726 --> 00:04:14.998
E esses nós não são elementos mas
eles ainda são nós na árvore DOM.
00:04:14.998 --> 00:04:17.541
Nós chamamos eles de
"nós folhas" porque eles são
00:04:17.541 --> 00:04:20.077
a última coisa mesmo
que pode ter em uma árvore.
00:04:20.077 --> 00:04:27.536
var strongText =
document.createTextNode("cat");
00:04:27.536 --> 00:04:31.816
E vamos apenas passar o texto, "cat".
00:04:31.816 --> 00:04:34.496
Se usarmos essa técnica, nós agora
00:04:34.496 --> 00:04:42.169
criamos dois nós que estão flutuando
no espaço: uma tag '< strong >'
00:04:42.169 --> 00:04:46.547
e então esse 'textNode',
que apenas diz "cat".
00:04:46.547 --> 00:04:49.680
E nós precisamos conectá-los um ao outro.
00:04:49.680 --> 00:04:54.910
E queremos a tag '< strong >'
para ser o pai de "cat".
00:04:54.910 --> 00:05:03.152
Então o que vamos fazer é dizer
'strongEl.appendChild(strongText);'
00:05:03.152 --> 00:05:12.114
Então agora nós temos a tag
'< strong >' com "cat" dentro,
00:05:12.114 --> 00:05:18.582
e temos que colocá-la onde queremos
porque ela ainda está flutuando no espaço.
00:05:18.582 --> 00:05:24.527
Nós estamos dentro do loop for
para 'nameEls', e cada 'nameEl'
00:05:24.527 --> 00:05:27.354
está onde queremos colocar
a tag '< strong >'.
00:05:27.354 --> 00:05:34.975
Então aqui,
'nameEls[i].appendChild(strongEl);'
00:05:34.975 --> 00:05:42.195
E agora nós vemos duplicado
porque eu deixei o jeito antigo.
00:05:42.195 --> 00:05:47.335
Ali está adicionando à tag '< span >'
que já tem uma tag '< strong >' nela.
00:05:47.335 --> 00:05:52.434
Poderíamos mudar essa linha para
'innerHTML' é igual a uma string vazia
00:05:52.434 --> 00:05:57.817
que vai efetivamente limpar a span
antes de adicionarmos a ela.
00:05:57.817 --> 00:06:04.925
Agora como você viu, isso levou muito mais
linhas de código que a versão 'innerHTML'.
00:06:04.925 --> 00:06:06.991
Então, por quê fizemos isso?
00:06:06.991 --> 00:06:10.789
Bem, muitos desenvolvedores não gostam
de modificar o documento desse jeito
00:06:10.789 --> 00:06:13.433
porque precisa de muito mais código.
00:06:13.733 --> 00:06:16.714
A maioria dos desenvolvedores usa
bibliotecas, como jQuery,
00:06:16.714 --> 00:06:21.352
para fazer modificações no DOM por eles,
o que provê funções que
00:06:21.352 --> 00:06:26.873
fazem o mesmo código com muito menos
linhas para você como o desenvolvedor
00:06:26.873 --> 00:06:29.810
porque você está usando as
funções da biblioteca no lugar.
00:06:29.810 --> 00:06:33.496
Gosto de escrever meu código desse jeito
porque eu gosto de poder
00:06:33.496 --> 00:06:38.666
ver exatamente como estou modificando
a árvore DOM, uma linha por vez.
00:06:38.666 --> 00:06:43.043
E me parece mais limpo que empurrar tudo
dentro de uma string de innerHTML.
00:06:43.043 --> 00:06:44.772
Mas talvez você odeie.
00:06:44.772 --> 00:06:47.188
De qualquer forma, agora
você sabe que existe.
00:06:47.188 --> 00:06:50.939
Então você pode usar se precisar
e você consegue entender
00:06:50.939 --> 00:06:54.370
o que bibliotecas como jQuery estão
realmente fazendo por trás dos panos.
00:06:54.370 --> 00:06:56.000
[Legendado por: Alberto Oliveira]
[Revisado por: Fernando dos Reis]