OK, de volta.
Então esse vídeo será um pouco diferente.
Não vamos introduzir novas maneiras de manipular o dom, mas vamos levar o que aprendemos e fazer um
pouco de um código ao longo.
Então, vamos jogar com a página inicial do Google.
Então eu recomendo que você abra o Google ou faça isso junto comigo ou faça isso por conta própria depois
de assistir o vídeo.
E vamos apenas fazer algumas coisas divertidas, como mudar o logotipo.
Nós vamos fazer uma foto de um gatinho desta vez apenas para ser justo para todos aqueles amantes de
gatos mudarão todos os links para que eles venham a ser dot com ou algo assim.
O único ponto que eu quero enfatizar nesta lição é que podemos usar um loop para manipular
múltiplos elementos, portanto, nem sempre precisamos selecionar uma coisa e mudar sua cor ou selecionar uma imagem e
mudar sua fonte.
Podemos selecionar todas as imagens e, em seguida, percorrer essa lista e, para cada uma, mudar sua fonte.
Então vou mostrar-lhe como eu faria isso aqui.
Então, vamos começar simples.
Vamos começar por selecionar este logotipo.
E uma nota lateral rápida se você estiver no Google em um dia em que eles tenham um Doodle do Google em
vez de este logotipo regular.
Pode não ser uma imagem aqui.
Às vezes eles têm animações extravagantes ou jogos interativos.
E nesse caso, eles podem ser algo como um elemento de tela.
Então, se você encontrar isso quando você inspecionar, está tudo bem, você pode assistir apenas a essa parte.
eu só quero mostrar que você pode fazê-lo no site de qualquer pessoa para selecioná-lo.
Já vimos como mudar fontes de imagens, mas
É uma imagem e tem um ID para que seja fácil.
Logotipo da HP.
Então, vamos selecionar que vamos chamar isso, nosso logotipo é igual ao documento que consulta o
logotipo do seletor HP.
E é claro que poderíamos ter usado o elemento por ID também.
Então, acabamos com logotipo igual a isso.
Então, agora selecionamos isso.
E se queremos mudar a imagem, vamos mudar a fonte.
Precisamos usar o atributo set e eu tenho apenas a imagem aqui.
Gatinho agradável.
Então vou pegar esse Kidan que você é.
Vou copiar isso e vou atualizar a fonte deste logotipo para fazer isso.
O atributo de conjunto de pontos do logotipo em vez do medo.
Nós apenas escreveremos a fonte.
E o segundo argumento é a nova fonte e entrei e entrei o meu pequeno gato Roquette.
Você pode receber uma mensagem como essa.
Dependendo da imagem que você usa.
Então, vou explicar brevemente o que é isso.
É apenas mencionar que estamos em uma página carregada com TTP como você pode ver que aparecem e a imagem
que eu coloquei a origem em B é H TTP.
E para torná-lo curto HTP é mais seguro do que o HGP.
Então, está reclamando que deveria ser tudo HTP Sim, não devemos usar algo menos seguro.
Essa é uma versão muito simples, mas ainda nos permite fazer isso.
Não é um grande problema para o que estamos tentando fazer aqui apenas jogando com o Google.
No entanto, é algo que você gostaria de considerar se você faz algo assim
em sua própria aplicação e seria um problema então.
Então volte ao conteúdo aqui.
Encontrou alterar a largura e altura deste gato para que ele ocupe a mesma quantidade de espaço que o
logotipo original do Google fez.
Posso ver, na verdade, que o tamanho era originalmente de 92 e com duzentos e setenta e dois.
E então é o que está acontecendo aqui.
Você pode ver se eu quero mudar isso. Posso fazer algo como este logo dot style dot com e pegue
uma string e basta mudar isso para ser 500 pixels.
Você pode ver isso se estender e eu posso fazer o mesmo.
Mude para ser mil pixels.
Obtenha um bom gatinho e nós podemos mudar a largura.
Quero dizer a altura e vamos fazer aquele gato 500 ou pobre.
Está ficando esticado em todo o lugar.
Então, vamos em frente e reajuste a altura para algo um pouco mais apropriado.
Vamos dar uma altura de cerca de 100 pixels e a largura
é de cerca de 200.
Tudo bem para que isso funcione para nós por enquanto apenas para mais algumas práticas.
Vamos também dar uma borda em torno dessa imagem, de modo que o logotipo que a borda do estilo é igual e
nós faremos uma beira roxa sólida de dois pixels e há nosso parceiro maravilhoso em torno dessa imagem.
OK, então, vamos passar para o que eu introduzi no início do vídeo, que está selecionando um
monte de elementos ao mesmo tempo e usando um loop para manipulá-los em vez de ter que fazê-lo individualmente.
Então, o que vamos fazer é selecionar todas as tags de âncora na página.
Há muitos links nesta página.
Nós vamos levar cada um e mudar o atributo ref para ir para algum outro site em vez de onde quer
que eles vá.
Então, para começar, precisamos selecionar todas as tags de âncora, de modo que temos muitas maneiras de fazer isso.
Eu vou chamar isso de links são links e faremos documento.
Nós poderíamos fazer uma carta de consulta, tudo o que eu vou fazer obter elementos por tag tag de âncora de
nome e se olharmos os links que você pode ver, recebemos alguns nesta página, então vamos passar por isso.
podemos simplesmente fazer links atributo de conjunto de pontos que não existe nos diz que o link começa no atributo não é uma função.
Não
E isso porque esse atributo só existe em elementos e links individuais.
É essa coleção de nós.
Então eu preciso rolar isso, como se eu fizesse um loop a qualquer outra matriz como o objeto.
Então eu não posso usar para cada um porque não é uma matriz real.
Então eu preciso usar um loop para ou, tecnicamente, eu poderia usar um loop while.
A maioria das pessoas usaria um loop for.
o comprimento e irá adicionar 1 e, em seguida, dentro do loop, vamos acessar cada link de link individual Oi.
Então, para são iguais a zero é menor que os links que
E vamos começar por apenas imprimir o conteúdo do texto.
Então, vincula esse conteúdo de texto e cancelaremos esse registro.
Então, este é um padrão comum que passa por um monte de elementos e
fazer algo, talvez, não imprimi-lo no console, mas exibi-lo de alguma forma ou mudar algo sobre isso mudando sua cor.
Então, entramos em Enter e você pode ver que este é o conteúdo do texto de todos os links na página.
Então, você conhece coisas como fotos e traduziu o Google plus drive play YouTube, todos esses links estão em algum lugar
nesta página, o que faz sentido ver que é a página inicial do Google.
Então, em vez de simplesmente imprimir as coisas em um golpe na seta para cima e voltar para este loop e vamos começar por
mudar o estilo para que possamos ver os comprimentos mais fáceis, vamos fazer com que eles sejam de uma cor diferente e vamos
fazer com que eles tenham uma borda ao redor deles .
Então eu vou me livrar do meu console que logar e eu vou lynx eu estilo e vamos mudar
o fundo para começar e vamos fazer isso um rosa.
E se nós entramos, pode ver que vou fechar o console.
Todos os links na página são agora rosa.
Eu tenho um fundo que é rosa.
Então, este é um link.
Todos esses naff são itens no botão de login.
É também um link.
Então, vamos fazer mais uma coisa.
Vamos fazer um loop novamente.
Bata a flecha para cima e vamos fazer algumas coisas, então vamos fazer o estilo.
A borda é igual a um pixel e vamos fazer o Purple Purple.
E na próxima linha de links eu estilo e vamos mudar a cor para ser laranja.
Então, esses dois hit entre.
E você pode ver que nós conseguimos esses links realmente bonitos na nossa página fundo rosa pequena beira roxa não
apenas uma borda regular.
É impressionante demais.
E também recebemos um texto laranja lá.
Mas se clicarmos neles, você pode ver que as armadilhas ainda não mudaram e isso faz sentido porque
não as mudamos.
Então eu quero mudar todos para ir para a WDW.
Ser dot com precisa ir para o con. E já tenho meus links selecionados.
Esta enorme coleção e eu já tenho esse loop escrito, então eu vou reutilizá-lo.
E apenas para reiterar isso é algo que vai fazer muito.
Então fique confortável se você puder escrever estes quatro loops onde não podemos usar um para cada um.
Então, temos que usar um loop for.
Fazemos isso o tempo todo.
E a partir daqui até chegar à consulta Jey, vamos escrever muito esse tipo de linha.
Então, vamos nos ligar.
E vamos começar, mas apenas imprimir para onde toda luz vai, então cancele esse registro.
E vamos cancelar esse registro obter atributo de atra.
Bem desse jeito.
E nós, tecnicamente, não precisamos inventar isso, só que é mais fácil para você ver.
E estamos perdendo o nosso constante registro fechando impressão para ver aqui e agora nós obtemos uma lista de todos os links
e é interessante que você possa ver alguns deles.
Este é o link para isso javascript em frente zero ou não.
ou alguns deles são caminhos relativos como este aqui e alguns deles são absolutos como este aqui.
Então, alguns deles estão vazios, eles não têm um 8 Tref, alguns deles vão para sites separados
ESTÁ BEM.
Então, vamos mudá-los agora.
Links de blog de Compton-Rock Eu tenho um atributo definido e não precisamos constantemente registá-lo atributo definido.
E vamos mudá-los para ser o que queremos HGF, queremos mudar o HPF para ser W. W. Isso é a barra de barras do ponto de barras do HTP, BW dot Bing dot com exatamente assim.
E entramos em cena.
Não parece que nada mudou.
Se formos links e simplesmente observamos o que temos.
Todo mundo agora passa a ser dot
com e também podemos inspecionar um e podemos ver no inspetor de elementos. Ele passa a ser dot com.
E a última coisa que fazemos para testá-lo é clicar em um.
Então, vamos acelerar o botão de login ou vamos parar o Gmail e você pode ver que ele está sendo para mim.
Então, para resumir, selecionamos um monte de coisas de uma coleção de links e, então,
seguimos essa coleção com um loop for e, em seguida, dentro desse loop
podemos fazer algo para cada elemento individual que será repetido para todos eles.
conheço 20 ou 30 comprimentos diferentes nesta página.
Então eu mudei a cor de fundo a borda da cor da fonte, mudamos a referência e nós só precisamos escrever algumas linhas e foi aplicado para eu não
Então, esse é um padrão que vamos usar muito nos próximos vídeos.