De volta com a página web sobre cães, estou muito determinada a usar JavaScript
e a api do DOM para transformá-la em uma página web especializada em gatos.
Existe um problema que estive ignorando até agora. Na verdade são dois,
dois cachorros, ou melhor, suas imagens. Não posso manter as imagens
desses adoráveis cães em nossa página sobre gatos. Preciso alterá-los.
Vamos começar encontrando as imagens usando o getElementsByTagName.
var imageEls = document.getElementsByTagName("img");
Desde que ele retorne vários elementos, precisamos usar um loop for
para percorrer-los, então eu vou configurar isso.
var i = 0; i < imageEls.length; i++
Mas o que eu coloquei dentro do loop for? Não posso mudar os elementos de imagem com
innerHTML porque as tags de imagem não tem isso. Eles são as tags de auto fechamento.
Em vez disso, preciso mudar as coisas sobre o que faz eles parecerem como cães
a URL das imagens, que está especificado
com o atributo src em cada uma das tags.
Podemos mudar os atributos dos elementos usando a notação de ponto. Vou te mostrar.
Primeiro vamos acessar o elemento atual com os colchetes, e então dizemos ponto
e vamos colocar o nome do atributo HTML como o nome da propriedade JavaScript =src
e em seguida, vou configurar com um novo valor; e eu vou colocar numa string vazia.
Observe que as imagens ficaram em branco,
uma vez que uma string vazia não aponta a qualquer imagem.
Para descobrir o que esta nova URL deve ser, vou colar o URL antigo aqui
e mudar o nome do arquivo para gato, porque eu sei
que essa é a URL da imagem do gato na Khan Academy.
Os cães agora são gatos, e a nossa gatificação está praticamente completa.
Você vê alguma coisa que ainda tem a ver com os cães? É muito sutil, mas
há uma coisa que deixou o link para a Wikipédia. Ela vai para a página de cães
e se o usuário acompanhar o link, eles vão me pegar no meu truque maldoso.
Quero enviar os gatos para seu lugar. Como devo achar esse link em JavaScript?
Eu poderia dar a este link um ID e usar getElementById.
Ou eu poderia usar getElementsByTagName e mudar todos os links na página.
Ou eu poderia ser super chique, e encontrar apenas links que levam
levam a páginas sobre cães, usando um seletor consulta CSS.
Deixe-me mostrar a consulta CSS que quero fazer aqui na primeira tag < style >.
Portanto, esta consulta CSS vai encontrar todos os links que têm a ver com cães.
Primeiro vou digitar "a", porque estou apenas procurando por links.
Então eu coloco [href =" Dog"].
Portanto, ele diz ao CSS para corresponder com qualquer link que tenha "Dog" nele.
E então vamos definir a cor para roxo. E selecionar-lo.
Então, isso é muito arrumado, e este é um seletor de atributo, e há um monte de
formas de usar seletores de atributo para realmente ir fundo em seu documento.
Para descobrir em JavaScript, podemos usar document.querySelectorAll, e colocar
var linkEls = document.querySelectorAll, e então podemos apenas ir e colar no
seletor que nós fizemos, embora temos que ter certeza de que não esquecemos
nossas aspas duplas. Aí vamos nós.
Então, agora parece que uma boa sequência.
E agora preciso percorrer estes, então mais uma vez só fazemos o nosso loop for
deve ser ficando realmente usado para fazer estes para loops e para cada um,
eu quero mudar o link para a página sobre gatos na Wikipédia.
Então, eu vou colocar linkEls[i].href
porque esse é o nome do atributo que estamos mudando e, em seguida, é igual,
então eu vou encontrar este URL e colá-lo aqui em baixo e só alterá-lo para gato,
porque eu tenho certeza que é o URL da página.
A gatificação mundial está completa.
Mas você ainda não aprendeu tudo sobre como manipular páginas web com JavaScript,
então fique por perto.
[Legendado por Fernando dos Reis] [Revisado por Paulo Trentin]