0:00:01.680,0:00:06.440
De volta com a página web sobre cães, [br]estou muito determinada a usar JavaScript

0:00:06.440,0:00:11.888
e a api do DOM para transformá-la em uma [br]página web especializada em gatos.

0:00:11.888,0:00:17.464
Existe um problema que estive ignorando[br]até agora. Na verdade são dois,

0:00:17.464,0:00:23.671
dois cachorros, ou melhor, suas imagens. [br]Não posso manter as imagens

0:00:23.671,0:00:29.478
desses adoráveis cães em nossa página [br]sobre gatos. Preciso alterá-los.

0:00:29.487,0:00:36.342
Vamos começar encontrando as imagens[br]usando o <i>getElementsByTagName</i>.

0:00:36.342,0:00:47.859
<i>var imageEls = [br]document.getElementsByTagName("img");</i>

0:00:48.109,0:00:51.268
Desde que ele retorne vários elementos,[br]precisamos usar um <i>loop for</i>

0:00:51.268,0:00:54.725
para percorrer-los, então eu vou[br]configurar isso.

0:00:54.725,0:01:04.427
<i>var i = 0; i < imageEls.length; i++</i>

0:01:05.097,0:01:11.456
Mas o que eu coloquei dentro do loop for?[br]Não posso mudar os elementos de imagem com

0:01:11.456,0:01:18.755
<b>innerHTML</b> porque as tags de imagem não tem[br]isso. Eles são as tags de auto fechamento.

0:01:18.755,0:01:23.796
Em vez disso, preciso mudar as coisas[br]sobre o que faz eles parecerem como cães

0:01:23.796,0:01:27.176
a URL das imagens,[br]que está especificado

0:01:27.176,0:01:30.721
com o atributo <i>src</i> em cada[br]uma das tags.

0:01:30.721,0:01:36.461
Podemos mudar os atributos dos elementos[br]usando a notação de ponto. Vou te mostrar.

0:01:36.461,0:01:43.179
Primeiro vamos acessar o elemento atual[br]com os colchetes, e então dizemos ponto

0:01:43.179,0:01:50.653
e vamos colocar o nome do atributo HTML[br]como o nome da propriedade JavaScript =src

0:01:50.653,0:01:54.841
e em seguida, vou configurar com um novo[br]valor; e eu vou colocar numa string vazia.

0:01:54.841,0:01:57.298
Observe que as imagens ficaram em branco,

0:01:57.298,0:02:01.672
uma vez que uma string vazia não aponta[br]a qualquer imagem.

0:02:01.672,0:02:07.664
Para descobrir o que esta nova URL[br]deve ser, vou colar o URL antigo aqui

0:02:07.664,0:02:13.022
e mudar o nome do arquivo[br]para gato, porque eu sei

0:02:13.022,0:02:16.842
que essa é a URL da imagem do gato[br]na Khan Academy.

0:02:18.022,0:02:23.054
Os cães agora são gatos, e a nossa[br]gatificação está praticamente completa.

0:02:23.404,0:02:30.897
Você vê alguma coisa que ainda tem a ver[br]com os cães? É muito sutil, mas

0:02:30.897,0:02:36.827
há uma coisa que deixou o link para[br]a Wikipédia. Ela vai para a página de cães

0:02:36.827,0:02:41.448
e se o usuário acompanhar o link,[br]eles vão me pegar no meu truque maldoso.

0:02:41.448,0:02:47.347
Quero enviar os gatos para seu lugar.[br]Como devo achar esse link em JavaScript?

0:02:47.347,0:02:51.828
Eu poderia dar a este link um ID [br]e usar <i><b>getElementById</b></i>.

0:02:51.828,0:02:57.096
Ou eu poderia usar <i><b>getElementsByTagName</b></i>[br]e mudar todos os links na página.

0:02:57.096,0:03:00.194
Ou eu poderia ser super chique,[br]e encontrar apenas links que levam

0:03:00.194,0:03:06.657
levam a páginas sobre cães, [br]usando um seletor consulta CSS.

0:03:06.657,0:03:11.822
Deixe-me mostrar a consulta CSS que quero[br]fazer aqui na primeira tag <i>< style ></i>.

0:03:11.822,0:03:15.946
Portanto, esta consulta CSS vai encontrar[br]todos os links que têm a ver com cães.

0:03:15.946,0:03:19.325
Primeiro vou digitar "<i>a</i>", porque estou[br]apenas procurando por links.

0:03:19.325,0:03:26.041
Então eu coloco <i>[href =" Dog"]</i>.

0:03:26.041,0:03:31.950
Portanto, ele diz ao CSS para corresponder[br]com qualquer link que tenha "Dog" nele.

0:03:31.950,0:03:38.166
E então vamos definir a cor para roxo.[br]E selecionar-lo.

0:03:38.166,0:03:43.566
Então, isso é muito arrumado, e este é um[br]seletor de atributo, e há um monte de

0:03:43.566,0:03:49.467
formas de usar seletores de atributo para[br]realmente ir fundo em seu documento.

0:03:49.467,0:03:58.041
Para descobrir em JavaScript, podemos usar[br]<i>document.querySelectorAll</i>, e colocar

0:03:58.041,0:04:07.992
<i>var linkEls = document.querySelectorAll</i>,[br]e então podemos apenas ir e colar no

0:04:07.992,0:04:12.893
seletor que nós fizemos, embora temos que[br]ter certeza de que não esquecemos

0:04:12.893,0:04:16.454
nossas aspas duplas. Aí vamos nós.

0:04:19.454,0:04:22.685
Então, agora parece que uma boa sequência.

0:04:22.705,0:04:27.548
E agora preciso percorrer estes, então[br]mais uma vez só fazemos o nosso loop for

0:04:27.568,0:04:34.645
deve ser ficando realmente usado para[br]fazer estes para loops e para cada um,

0:04:34.645,0:04:41.642
eu quero mudar o link para a página[br]sobre gatos na Wikipédia.

0:04:41.642,0:04:45.501
Então, eu vou colocar <i>linkEls[i].href</i>

0:04:45.501,0:04:50.681
porque esse é o nome do atributo que[br]estamos mudando e, em seguida, é igual,

0:04:50.681,0:05:00.113
então eu vou encontrar este URL e colá-lo[br]aqui em baixo e só alterá-lo para gato,

0:05:00.113,0:05:04.295
porque eu tenho certeza que[br]é o URL da página.

0:05:05.745,0:05:08.872
A gatificação mundial está completa.

0:05:09.407,0:05:13.287
Mas você ainda não aprendeu tudo sobre[br]como manipular páginas web com JavaScript,

0:05:13.423,0:05:15.313
então fique por perto.

0:05:15.748,0:05:31.000
[Legendado por Fernando dos Reis][br][Revisado por Paulo Trentin]