1
00:00:01,470 --> 00:00:02,790
OK, de volta.

2
00:00:02,790 --> 00:00:05,340
Então esse vídeo será um pouco diferente.

3
00:00:05,340 --> 00:00:09,750
Não vamos introduzir novas maneiras de manipular o dom, mas vamos levar o que aprendemos e fazer um

4
00:00:09,780 --> 00:00:11,410
pouco de um código ao longo.

5
00:00:11,640 --> 00:00:13,860
Então, vamos jogar com a página inicial do Google.

6
00:00:13,950 --> 00:00:18,990
Então eu recomendo que você abra o Google ou faça isso junto comigo ou faça isso por conta própria depois

7
00:00:18,990 --> 00:00:20,080
de assistir o vídeo.

8
00:00:20,340 --> 00:00:23,780
E vamos apenas fazer algumas coisas divertidas, como mudar o logotipo.

9
00:00:23,940 --> 00:00:28,530
Nós vamos fazer uma foto de um gatinho desta vez apenas para ser justo para todos aqueles amantes de

10
00:00:28,530 --> 00:00:32,220
gatos mudarão todos os links para que eles venham a ser dot com ou algo assim.

11
00:00:32,250 --> 00:00:37,410
O único ponto que eu quero enfatizar nesta lição é que podemos usar um loop para manipular

12
00:00:37,410 --> 00:00:42,810
múltiplos elementos, portanto, nem sempre precisamos selecionar uma coisa e mudar sua cor ou selecionar uma imagem e

13
00:00:42,810 --> 00:00:43,710
mudar sua fonte.

14
00:00:43,770 --> 00:00:49,440
Podemos selecionar todas as imagens e, em seguida, percorrer essa lista e, para cada uma, mudar sua fonte.

15
00:00:49,470 --> 00:00:51,080
Então vou mostrar-lhe como eu faria isso aqui.

16
00:00:51,300 --> 00:00:52,790
Então, vamos começar simples.

17
00:00:53,100 --> 00:00:55,050
Vamos começar por selecionar este logotipo.

18
00:00:55,380 --> 00:01:00,480
E uma nota lateral rápida se você estiver no Google em um dia em que eles tenham um Doodle do Google em

19
00:01:00,480 --> 00:01:01,730
vez de este logotipo regular.

20
00:01:01,860 --> 00:01:03,640
Pode não ser uma imagem aqui.

21
00:01:03,780 --> 00:01:06,850
Às vezes eles têm animações extravagantes ou jogos interativos.

22
00:01:06,930 --> 00:01:10,390
E nesse caso, eles podem ser algo como um elemento de tela.

23
00:01:10,470 --> 00:01:14,980
Então, se você encontrar isso quando você inspecionar, está tudo bem, você pode assistir apenas a essa parte.

24
00:01:15,010 --> 00:01:19,650
eu só quero mostrar que você pode fazê-lo no site de qualquer pessoa para selecioná-lo.

25
00:01:19,690 --> 00:01:22,100
Já vimos como mudar fontes de imagens, mas

26
00:01:22,530 --> 00:01:26,680
É uma imagem e tem um ID para que seja fácil.

27
00:01:26,850 --> 00:01:28,290
Logotipo da HP.

28
00:01:28,410 --> 00:01:34,100
Então, vamos selecionar que vamos chamar isso, nosso logotipo é igual ao documento que consulta o

29
00:01:37,320 --> 00:01:38,660
logotipo do seletor HP.

30
00:01:38,880 --> 00:01:42,090
E é claro que poderíamos ter usado o elemento por ID também.

31
00:01:42,390 --> 00:01:46,210
Então, acabamos com logotipo igual a isso.

32
00:01:46,320 --> 00:01:47,890
Então, agora selecionamos isso.

33
00:01:48,030 --> 00:01:51,540
E se queremos mudar a imagem, vamos mudar a fonte.

34
00:01:51,540 --> 00:01:55,530
Precisamos usar o atributo set e eu tenho apenas a imagem aqui.

35
00:01:56,190 --> 00:01:57,650
Gatinho agradável.

36
00:01:57,660 --> 00:01:59,070
Então vou pegar esse Kidan que você é.

37
00:01:59,060 --> 00:02:04,540
Vou copiar isso e vou atualizar a fonte deste logotipo para fazer isso.

38
00:02:04,650 --> 00:02:10,210
O atributo de conjunto de pontos do logotipo em vez do medo.

39
00:02:10,380 --> 00:02:12,630
Nós apenas escreveremos a fonte.

40
00:02:12,810 --> 00:02:20,420
E o segundo argumento é a nova fonte e entrei e entrei o meu pequeno gato Roquette.

41
00:02:21,210 --> 00:02:22,760
Você pode receber uma mensagem como essa.

42
00:02:22,860 --> 00:02:24,720
Dependendo da imagem que você usa.

43
00:02:24,900 --> 00:02:26,770
Então, vou explicar brevemente o que é isso.

44
00:02:26,910 --> 00:02:33,300
É apenas mencionar que estamos em uma página carregada com TTP como você pode ver que aparecem e a imagem

45
00:02:33,300 --> 00:02:36,470
que eu coloquei a origem em B é H TTP.

46
00:02:36,570 --> 00:02:40,700
E para torná-lo curto HTP é mais seguro do que o HGP.

47
00:02:40,710 --> 00:02:46,400
Então, está reclamando que deveria ser tudo HTP Sim, não devemos usar algo menos seguro.

48
00:02:46,410 --> 00:02:49,560
Essa é uma versão muito simples, mas ainda nos permite fazer isso.

49
00:02:49,560 --> 00:02:53,630
Não é um grande problema para o que estamos tentando fazer aqui apenas jogando com o Google.

50
00:02:53,670 --> 00:02:58,020
No entanto, é algo que você gostaria de considerar se você faz algo assim

51
00:02:58,020 --> 00:03:00,990
em sua própria aplicação e seria um problema então.

52
00:03:01,020 --> 00:03:03,070
Então volte ao conteúdo aqui.

53
00:03:03,280 --> 00:03:09,330
Encontrou alterar a largura e altura deste gato para que ele ocupe a mesma quantidade de espaço que o

54
00:03:09,570 --> 00:03:11,230
logotipo original do Google fez.

55
00:03:11,460 --> 00:03:19,800
Posso ver, na verdade, que o tamanho era originalmente de 92 e com duzentos e setenta e dois.

56
00:03:20,280 --> 00:03:22,130
E então é o que está acontecendo aqui.

57
00:03:22,170 --> 00:03:31,510
Você pode ver se eu quero mudar isso. Posso fazer algo como este logo dot style dot com e pegue

58
00:03:31,530 --> 00:03:36,300
uma string e basta mudar isso para ser 500 pixels.

59
00:03:36,810 --> 00:03:39,720
Você pode ver isso se estender e eu posso fazer o mesmo.

60
00:03:39,750 --> 00:03:41,530
Mude para ser mil pixels.

61
00:03:41,970 --> 00:03:45,750
Obtenha um bom gatinho e nós podemos mudar a largura.

62
00:03:45,870 --> 00:03:51,900
Quero dizer a altura e vamos fazer aquele gato 500 ou pobre.

63
00:03:51,900 --> 00:03:55,410
Está ficando esticado em todo o lugar.

64
00:03:55,590 --> 00:03:59,550
Então, vamos em frente e reajuste a altura para algo um pouco mais apropriado.

65
00:03:59,730 --> 00:04:06,690
Vamos dar uma altura de cerca de 100 pixels e a largura

66
00:04:09,960 --> 00:04:13,070
é de cerca de 200.

67
00:04:13,080 --> 00:04:16,590
Tudo bem para que isso funcione para nós por enquanto apenas para mais algumas práticas.

68
00:04:16,590 --> 00:04:26,040
Vamos também dar uma borda em torno dessa imagem, de modo que o logotipo que a borda do estilo é igual e

69
00:04:26,040 --> 00:04:34,130
nós faremos uma beira roxa sólida de dois pixels e há nosso parceiro maravilhoso em torno dessa imagem.

70
00:04:34,410 --> 00:04:39,690
OK, então, vamos passar para o que eu introduzi no início do vídeo, que está selecionando um

71
00:04:39,690 --> 00:04:45,750
monte de elementos ao mesmo tempo e usando um loop para manipulá-los em vez de ter que fazê-lo individualmente.

72
00:04:45,750 --> 00:04:48,980
Então, o que vamos fazer é selecionar todas as tags de âncora na página.

73
00:04:48,990 --> 00:04:50,740
Há muitos links nesta página.

74
00:04:50,820 --> 00:04:56,600
Nós vamos levar cada um e mudar o atributo ref para ir para algum outro site em vez de onde quer

75
00:04:56,610 --> 00:04:57,290
que eles vá.

76
00:04:57,510 --> 00:05:02,830
Então, para começar, precisamos selecionar todas as tags de âncora, de modo que temos muitas maneiras de fazer isso.

77
00:05:02,880 --> 00:05:07,170
Eu vou chamar isso de links são links e faremos documento.

78
00:05:07,170 --> 00:05:15,540
Nós poderíamos fazer uma carta de consulta, tudo o que eu vou fazer obter elementos por tag tag de âncora de

79
00:05:15,540 --> 00:05:23,470
nome e se olharmos os links que você pode ver, recebemos alguns nesta página, então vamos passar por isso.

80
00:05:23,550 --> 00:05:35,070
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.

81
00:05:35,070 --> 00:05:35,750
Não

82
00:05:35,880 --> 00:05:40,860
E isso porque esse atributo só existe em elementos e links individuais.

83
00:05:40,860 --> 00:05:42,640
É essa coleção de nós.

84
00:05:42,750 --> 00:05:47,960
Então eu preciso rolar isso, como se eu fizesse um loop a qualquer outra matriz como o objeto.

85
00:05:48,330 --> 00:05:51,590
Então eu não posso usar para cada um porque não é uma matriz real.

86
00:05:51,660 --> 00:05:54,880
Então eu preciso usar um loop para ou, tecnicamente, eu poderia usar um loop while.

87
00:05:54,900 --> 00:05:56,310
A maioria das pessoas usaria um loop for.

88
00:05:56,490 --> 00:06:05,640
o comprimento e irá adicionar 1 e, em seguida, dentro do loop, vamos acessar cada link de link individual Oi.

89
00:06:08,700 --> 00:06:14,160
Então, para são iguais a zero é menor que os links que

90
00:06:14,340 --> 00:06:18,040
E vamos começar por apenas imprimir o conteúdo do texto.

91
00:06:18,060 --> 00:06:22,850
Então, vincula esse conteúdo de texto e cancelaremos esse registro.

92
00:06:24,090 --> 00:06:28,710
Então, este é um padrão comum que passa por um monte de elementos e

93
00:06:28,710 --> 00:06:35,140
fazer algo, talvez, não imprimi-lo no console, mas exibi-lo de alguma forma ou mudar algo sobre isso mudando sua cor.

94
00:06:35,420 --> 00:06:40,050
Então, entramos em Enter e você pode ver que este é o conteúdo do texto de todos os links na página.

95
00:06:40,200 --> 00:06:46,320
Então, você conhece coisas como fotos e traduziu o Google plus drive play YouTube, todos esses links estão em algum lugar

96
00:06:46,320 --> 00:06:50,460
nesta página, o que faz sentido ver que é a página inicial do Google.

97
00:06:50,520 --> 00:06:56,460
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

98
00:06:56,460 --> 00:07:02,190
mudar o estilo para que possamos ver os comprimentos mais fáceis, vamos fazer com que eles sejam de uma cor diferente e vamos

99
00:07:02,610 --> 00:07:05,570
fazer com que eles tenham uma borda ao redor deles .

100
00:07:05,910 --> 00:07:14,520
Então eu vou me livrar do meu console que logar e eu vou lynx eu estilo e vamos mudar

101
00:07:15,150 --> 00:07:19,990
o fundo para começar e vamos fazer isso um rosa.

102
00:07:20,800 --> 00:07:25,050
E se nós entramos, pode ver que vou fechar o console.

103
00:07:25,080 --> 00:07:27,790
Todos os links na página são agora rosa.

104
00:07:27,810 --> 00:07:29,120
Eu tenho um fundo que é rosa.

105
00:07:29,280 --> 00:07:31,680
Então, este é um link.

106
00:07:31,750 --> 00:07:34,490
Todos esses naff são itens no botão de login.

107
00:07:34,830 --> 00:07:35,890
É também um link.

108
00:07:36,270 --> 00:07:37,910
Então, vamos fazer mais uma coisa.

109
00:07:38,010 --> 00:07:39,140
Vamos fazer um loop novamente.

110
00:07:39,210 --> 00:07:43,870
Bata a flecha para cima e vamos fazer algumas coisas, então vamos fazer o estilo.

111
00:07:43,910 --> 00:07:52,060
A borda é igual a um pixel e vamos fazer o Purple Purple.

112
00:07:52,410 --> 00:08:04,980
E na próxima linha de links eu estilo e vamos mudar a cor para ser laranja.

113
00:08:05,520 --> 00:08:07,880
Então, esses dois hit entre.

114
00:08:07,890 --> 00:08:14,820
E você pode ver que nós conseguimos esses links realmente bonitos na nossa página fundo rosa pequena beira roxa não

115
00:08:14,820 --> 00:08:16,010
apenas uma borda regular.

116
00:08:16,110 --> 00:08:18,090
É impressionante demais.

117
00:08:18,180 --> 00:08:20,610
E também recebemos um texto laranja lá.

118
00:08:21,240 --> 00:08:26,730
Mas se clicarmos neles, você pode ver que as armadilhas ainda não mudaram e isso faz sentido porque

119
00:08:26,730 --> 00:08:27,640
não as mudamos.

120
00:08:27,750 --> 00:08:31,230
Então eu quero mudar todos para ir para a WDW.

121
00:08:31,270 --> 00:08:36,590
Ser dot com precisa ir para o con. E já tenho meus links selecionados.

122
00:08:36,630 --> 00:08:41,620
Esta enorme coleção e eu já tenho esse loop escrito, então eu vou reutilizá-lo.

123
00:08:42,540 --> 00:08:45,680
E apenas para reiterar isso é algo que vai fazer muito.

124
00:08:45,690 --> 00:08:51,070
Então fique confortável se você puder escrever estes quatro loops onde não podemos usar um para cada um.

125
00:08:51,090 --> 00:08:52,610
Então, temos que usar um loop for.

126
00:08:52,680 --> 00:08:53,770
Fazemos isso o tempo todo.

127
00:08:53,790 --> 00:08:59,050
E a partir daqui até chegar à consulta Jey, vamos escrever muito esse tipo de linha.

128
00:08:59,310 --> 00:09:02,080
Então, vamos nos ligar.

129
00:09:02,430 --> 00:09:08,580
E vamos começar, mas apenas imprimir para onde toda luz vai, então cancele esse registro.

130
00:09:10,050 --> 00:09:16,060
E vamos cancelar esse registro obter atributo de atra.

131
00:09:18,240 --> 00:09:19,770
Bem desse jeito.

132
00:09:20,400 --> 00:09:25,740
E nós, tecnicamente, não precisamos inventar isso, só que é mais fácil para você ver.

133
00:09:26,250 --> 00:09:33,990
E estamos perdendo o nosso constante registro fechando impressão para ver aqui e agora nós obtemos uma lista de todos os links

134
00:09:37,320 --> 00:09:40,290
e é interessante que você possa ver alguns deles.

135
00:09:40,380 --> 00:09:45,090
Este é o link para isso javascript em frente zero ou não.

136
00:09:45,150 --> 00:09:53,280
ou alguns deles são caminhos relativos como este aqui e alguns deles são absolutos como este aqui.

137
00:09:53,280 --> 00:10:01,710
Então, alguns deles estão vazios, eles não têm um 8 Tref, alguns deles vão para sites separados

138
00:10:01,770 --> 00:10:02,310
ESTÁ BEM.

139
00:10:02,490 --> 00:10:04,730
Então, vamos mudá-los agora.

140
00:10:04,890 --> 00:10:11,230
Links de blog de Compton-Rock Eu tenho um atributo definido e não precisamos constantemente registá-lo atributo definido.

141
00:10:11,430 --> 00:10:17,400
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.

142
00:10:17,430 --> 00:10:25,930
E entramos em cena.

143
00:10:26,340 --> 00:10:27,930
Não parece que nada mudou.

144
00:10:27,930 --> 00:10:29,570
Se formos links e simplesmente observamos o que temos.

145
00:10:29,880 --> 00:10:32,650
Todo mundo agora passa a ser dot

146
00:10:32,820 --> 00:10:40,110
com e também podemos inspecionar um e podemos ver no inspetor de elementos. Ele passa a ser dot com.

147
00:10:40,110 --> 00:10:42,480
E a última coisa que fazemos para testá-lo é clicar em um.

148
00:10:42,780 --> 00:10:45,870
Então, vamos acelerar o botão de login ou vamos parar o Gmail e você pode ver que ele está sendo para mim.

149
00:10:45,990 --> 00:10:52,860
Então, para resumir, selecionamos um monte de coisas de uma coleção de links e, então,

150
00:10:53,580 --> 00:10:59,730
seguimos essa coleção com um loop for e, em seguida, dentro desse loop

151
00:10:59,790 --> 00:11:05,580
podemos fazer algo para cada elemento individual que será repetido para todos eles.

152
00:11:05,580 --> 00:11:07,470
conheço 20 ou 30 comprimentos diferentes nesta página.

153
00:11:07,500 --> 00:11:14,310
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

154
00:11:14,310 --> 00:11:19,500
Então, esse é um padrão que vamos usar muito nos próximos vídeos.

155
00:11:19,500 --> 00:11:22,470