Alterando atributos (Versão em vídeo)

Esta é uma gravação de vídeo de uma palestra interativa, carregada para tornar mais fácil a criação de legendas.
Por favor, assista a palestra interativa por original na Khan Academy, onde você pode pausar e editar e ver o código em uma resolução melhor:
http://www.khanacademy.org/computer-programming

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]