1
00:00:01,470 --> 00:00:02,790
Bien, bienvenido de nuevo.

2
00:00:02,790 --> 00:00:05,340
Entonces este video va a ser un poco diferente.

3
00:00:05,340 --> 00:00:09,750
No introduciremos nuevas formas de manipular la dom sino que tomaremos lo que hemos aprendido

4
00:00:09,780 --> 00:00:11,410
y haremos un poco de código.

5
00:00:11,640 --> 00:00:13,860
Entonces vamos a jugar con la página de inicio de Google.

6
00:00:13,950 --> 00:00:18,990
Así que le recomiendo que abra Google o haga esto junto conmigo o hágalo usted mismo después

7
00:00:18,990 --> 00:00:20,080
de ver el video.

8
00:00:20,340 --> 00:00:23,780
Y vamos a hacer algunas cosas divertidas, como cambiar el logo.

9
00:00:23,940 --> 00:00:28,530
Haremos una foto de un gatito esta vez solo para ser justos con todos los amantes de los

10
00:00:28,530 --> 00:00:32,220
gatos que cambiarán todos los enlaces para que sean dot com o algo así.

11
00:00:32,250 --> 00:00:37,410
El único punto que quiero enfatizar en esta lección es que podemos usar un bucle para manipular múltiples

12
00:00:37,410 --> 00:00:42,810
elementos, por lo que no siempre tenemos que seleccionar una cosa y cambiar su color o seleccionar una imagen

13
00:00:42,810 --> 00:00:43,710
y cambiar su fuente.

14
00:00:43,770 --> 00:00:49,440
Podemos seleccionar todas las imágenes y luego recorrer esa lista y cambiar su fuente para cada una.

15
00:00:49,470 --> 00:00:51,080
Así que les mostraré cómo lo haría aquí.

16
00:00:51,300 --> 00:00:52,790
Entonces comenzaremos de manera simple.

17
00:00:53,100 --> 00:00:55,050
Comencemos por seleccionar este logo.

18
00:00:55,380 --> 00:01:00,480
Y una nota lateral rápida si estás en Google en un día en el que tienen un Google Doodle en

19
00:01:00,480 --> 00:01:01,730
lugar de este logotipo normal.

20
00:01:01,860 --> 00:01:03,640
Puede que no sea una imagen aquí.

21
00:01:03,780 --> 00:01:06,850
A veces tienen animaciones sofisticadas o juegos interactivos.

22
00:01:06,930 --> 00:01:10,390
Y en ese caso, podrían ser algo así como un elemento de lienzo.

23
00:01:10,470 --> 00:01:14,980
Entonces, si te encuentras con eso cuando inspecciona Eso está bien, solo puedes mirar esta parte.

24
00:01:15,010 --> 00:01:19,650
pero solo quiero mostrar que puedes hacerlo en el sitio web de cualquiera, así que selecciónalo.

25
00:01:19,690 --> 00:01:22,100
Ya hemos visto cómo cambiar las fuentes de imagen,

26
00:01:22,530 --> 00:01:26,680
Es una imagen y tiene una identificación, por lo que es más fácil.

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

28
00:01:28,410 --> 00:01:34,100
Entonces, seleccionemos, vamos a llamarlo, nuestro logo es igual al documento que el selector de consulta

29
00:01:37,320 --> 00:01:38,660
del logotipo de HP.

30
00:01:38,880 --> 00:01:42,090
Y, por supuesto, podríamos haber usado elementos por ID también.

31
00:01:42,390 --> 00:01:46,210
Así que terminamos con Logo igual a eso.

32
00:01:46,320 --> 00:01:47,890
Entonces, ahora hemos seleccionado eso.

33
00:01:48,030 --> 00:01:51,540
Y si queremos cambiar la imagen vamos a cambiar la fuente.

34
00:01:51,540 --> 00:01:55,530
Necesitamos usar set attribute y aquí solo tengo la imagen.

35
00:01:56,190 --> 00:01:57,650
Buen gatito.

36
00:01:57,660 --> 00:01:59,070
Así que voy a tomar este Kidan que eres.

37
00:01:59,060 --> 00:02:04,540
Copiaré eso y voy a actualizar la fuente de este logotipo para hacer eso.

38
00:02:04,650 --> 00:02:10,210
Haga el atributo logo dot set en lugar de miedo.

39
00:02:10,380 --> 00:02:12,630
Vamos a escribir la fuente.

40
00:02:12,810 --> 00:02:20,420
Y el segundo argumento es la nueva fuente y presiono Enter y aparece mi pequeño y simpático gato Roquette.

41
00:02:21,210 --> 00:02:22,760
Puede recibir un mensaje como este.

42
00:02:22,860 --> 00:02:24,720
Dependiendo de la imagen que uses

43
00:02:24,900 --> 00:02:26,770
Entonces, explicaré brevemente qué es esto.

44
00:02:26,910 --> 00:02:33,300
Solo mencionamos que estamos en una página cargada con TTP, como puede ver, que aparece y que la imagen

45
00:02:33,300 --> 00:02:36,470
que establecí como origen en B es H TTP.

46
00:02:36,570 --> 00:02:40,700
Y para hacerlo corto, HTP es más seguro que HGP.

47
00:02:40,710 --> 00:02:46,400
Entonces se queja de que debería ser todo HTP. Sí, no deberíamos usar algo menos seguro.

48
00:02:46,410 --> 00:02:49,560
Esa es una versión realmente simple pero aún nos permite hacerlo.

49
00:02:49,560 --> 00:02:53,630
No es un gran problema para lo que estamos tratando de hacer aquí simplemente jugando con Google.

50
00:02:53,670 --> 00:02:58,020
Sin embargo, es algo que debería considerar si hace algo como esto

51
00:02:58,020 --> 00:03:00,990
en su propia aplicación y entonces sería un problema.

52
00:03:01,020 --> 00:03:03,070
Así que volvamos al contenido aquí.

53
00:03:03,280 --> 00:03:09,330
Se encontró que cambia el ancho y la altura de este gato para que ocupe la misma cantidad de espacio

54
00:03:09,570 --> 00:03:11,230
que el logotipo original de Google.

55
00:03:11,460 --> 00:03:19,800
Veo realmente que la altura era 92 originalmente y con doscientos setenta y dos.

56
00:03:20,280 --> 00:03:22,130
Y eso es lo que está sucediendo aquí.

57
00:03:22,170 --> 00:03:31,510
Puedes ver si quiero cambiar esto. Puedo hacer algo como este punto del estilo del logotipo con y tomar una cadena

58
00:03:31,530 --> 00:03:36,300
y simplemente cambiar eso para que sea de 500 píxeles.

59
00:03:36,810 --> 00:03:39,720
Puedes ver que se extiende y puedo hacer lo mismo.

60
00:03:39,750 --> 00:03:41,530
Cámbialo por mil píxeles.

61
00:03:41,970 --> 00:03:45,750
Consigue un lindo gatito elástico y podemos cambiar el ancho.

62
00:03:45,870 --> 00:03:51,900
Me refiero a la altura y vamos a hacer ese gato 500 o pobre.

63
00:03:51,900 --> 00:03:55,410
Se está estirando por todos lados.

64
00:03:55,590 --> 00:03:59,550
Entonces continuemos y restablezcamos la altura a algo un poco más apropiado.

65
00:03:59,730 --> 00:04:06,690
Vamos a que la altura sea de aproximadamente 100 píxeles y

66
00:04:09,960 --> 00:04:13,070
el ancho sea aproximadamente 200.

67
00:04:13,080 --> 00:04:16,590
De acuerdo, entonces eso nos funcionará por ahora solo para practicar un poco más.

68
00:04:16,590 --> 00:04:26,040
Démosle también un borde alrededor de esa imagen para que el logo de ese borde de estilo sea igual y

69
00:04:26,040 --> 00:04:34,130
haremos un borde de color sólido de dos píxeles y nuestro maravilloso compañero estará alrededor de esa imagen.

70
00:04:34,410 --> 00:04:39,690
OK, así que ahora pasemos a lo que presenté al comienzo del video, que es seleccionar un

71
00:04:39,690 --> 00:04:45,750
grupo de elementos a la vez y usar un bucle para manipularlos en lugar de tener que hacerlo individualmente.

72
00:04:45,750 --> 00:04:48,980
Entonces, lo que vamos a hacer es seleccionar todas las etiquetas de anclaje en la página.

73
00:04:48,990 --> 00:04:50,740
Hay muchos enlaces en esta página.

74
00:04:50,820 --> 00:04:56,600
Vamos a tomar cada uno y cambiar el atributo ref para ir a otro sitio web en lugar de ir a

75
00:04:56,610 --> 00:04:57,290
donde sea.

76
00:04:57,510 --> 00:05:02,830
Entonces, para empezar, necesitamos seleccionar todas las etiquetas de anclaje, así que tenemos muchas maneras de hacerlo.

77
00:05:02,880 --> 00:05:07,170
Voy a llamarlo enlaces son enlaces y haremos documento.

78
00:05:07,170 --> 00:05:15,540
Podríamos hacer una carta de consulta, pero voy a obtener elementos por etiqueta de anclaje de nombre de etiqueta y

79
00:05:15,540 --> 00:05:23,470
si miramos los enlaces, podemos ver que obtenemos bastantes en esta página, así que vamos a recorrer todo esto.

80
00:05:23,550 --> 00:05:35,070
podemos simplemente hacer enlaces. Conjunto de puntos. Atributo que no existe; nos dice que el enlace comienza en el atributo, no es una función.

81
00:05:35,070 --> 00:05:35,750
No

82
00:05:35,880 --> 00:05:40,860
Y eso es porque dicho atributo solo existe en elementos individuales y enlaces.

83
00:05:40,860 --> 00:05:42,640
Es esta colección de nodos.

84
00:05:42,750 --> 00:05:47,960
Así que tengo que recorrerlo como si fuera un bucle a través de cualquier otra matriz como objeto.

85
00:05:48,330 --> 00:05:51,590
Entonces no puedo usar para cada uno porque no es una matriz real.

86
00:05:51,660 --> 00:05:54,880
Entonces necesito usar un bucle for o técnicamente podría usar un ciclo while.

87
00:05:54,900 --> 00:05:56,310
La mayoría de las personas usaría un bucle for.

88
00:05:56,490 --> 00:06:05,640
esa longitud y se agregará 1 y luego dentro del bucle vamos a acceder a cada enlace de enlace individual Hola.

89
00:06:08,700 --> 00:06:14,160
Así que para son iguales cero es menor que los enlaces de

90
00:06:14,340 --> 00:06:18,040
Y comencemos imprimiendo su contenido de texto.

91
00:06:18,060 --> 00:06:22,850
Así que vincula ese contenido de texto y cancelaremos ese registro.

92
00:06:24,090 --> 00:06:28,710
Así que este es un patrón común que recorre un grupo de elementos y hace algo

93
00:06:28,710 --> 00:06:35,140
que tal vez no se imprime en la consola pero que se muestra de alguna manera o cambia algo cambiando el color.

94
00:06:35,420 --> 00:06:40,050
Entonces presionamos enter y puede ver que este es el contenido de texto de todos los enlaces en la página.

95
00:06:40,200 --> 00:06:46,320
Así que te hacemos saber cosas como fotos y traduces Google y Drive play YouTube, todos esos enlaces están en algún lugar de

96
00:06:46,320 --> 00:06:50,460
esta página, lo cual tiene sentido ya que es la página de inicio de Google.

97
00:06:50,520 --> 00:06:56,460
Entonces, en lugar de simplemente imprimir cosas en un golpe, la flecha hacia arriba y volver a este ciclo,

98
00:06:56,460 --> 00:07:02,190
comencemos cambiando el estilo para que podamos ver las longitudes más fácilmente, hagamos que sean de un color diferente

99
00:07:02,610 --> 00:07:05,570
y hagamos que tengan un borde alrededor de ellas. .

100
00:07:05,910 --> 00:07:14,520
Así que voy a deshacerme de mi consola y voy a hacer el estilo de lynx y cambiaremos el fondo

101
00:07:15,150 --> 00:07:19,990
para comenzar y vamos a hacer que sea de color rosa.

102
00:07:20,800 --> 00:07:25,050
Y si presionamos enter, puede ver que cerraré la consola.

103
00:07:25,080 --> 00:07:27,790
Todos los enlaces en la página ahora son de color rosa.

104
00:07:27,810 --> 00:07:29,120
Tengo un fondo que es rosado.

105
00:07:29,280 --> 00:07:31,680
Entonces esto aquí es un enlace.

106
00:07:31,750 --> 00:07:34,490
Todos estos naff son elementos en el botón de inicio de sesión.

107
00:07:34,830 --> 00:07:35,890
También es un enlace.

108
00:07:36,270 --> 00:07:37,910
Entonces, hagamos una cosa más.

109
00:07:38,010 --> 00:07:39,140
Vamos a recorrer nuevamente.

110
00:07:39,210 --> 00:07:43,870
Pulse la flecha hacia arriba y hagamos algunas cosas, hagamos el estilo.

111
00:07:43,910 --> 00:07:52,060
El borde equivale a un píxel y hagamos dasht violeta.

112
00:07:52,410 --> 00:08:04,980
Y en los siguientes enlaces de línea, hago un estilo y cambiemos el color para que sea naranja.

113
00:08:05,520 --> 00:08:07,880
Entonces esos dos presionan enter.

114
00:08:07,890 --> 00:08:14,820
Y puede ver que obtenemos estos enlaces realmente hermosos en nuestra página de fondo rosa, un pequeño borde morado no

115
00:08:14,820 --> 00:08:16,010
solo un borde regular.

116
00:08:16,110 --> 00:08:18,090
Es dasht muy elegante.

117
00:08:18,180 --> 00:08:20,610
Y también recibimos algunos textos en naranja.

118
00:08:21,240 --> 00:08:26,730
Pero si hacemos clic en ellos, puede ver que las trampas aún no han cambiado y que tiene sentido porque no

119
00:08:26,730 --> 00:08:27,640
las hemos cambiado.

120
00:08:27,750 --> 00:08:31,230
Así que quiero cambiarlos a todos para ir a WDW.

121
00:08:31,270 --> 00:08:36,590
Ser punto com necesita ir a la estafa. Y ya tengo mis enlaces seleccionados.

122
00:08:36,630 --> 00:08:41,620
Esta gran colección ya tengo ese bucle escrito, así que voy a reutilizarlo.

123
00:08:42,540 --> 00:08:45,680
Y solo para reiterar que esto es algo que hará mucho.

124
00:08:45,690 --> 00:08:51,070
Así que póngase cómodo si puede escribir estos cuatro bucles donde no podemos usar un para cada uno.

125
00:08:51,090 --> 00:08:52,610
Entonces, tenemos que usar un bucle for.

126
00:08:52,680 --> 00:08:53,770
Hacemos esto todo el tiempo.

127
00:08:53,790 --> 00:08:59,050
Y de aquí en adelante hasta que lleguemos a la consulta de Jey, vamos a escribir mucho este tipo de línea.

128
00:08:59,310 --> 00:09:02,080
Así que vamos a enlaces I.

129
00:09:02,430 --> 00:09:08,580
Y vamos a comenzar, pero solo imprimiremos dónde se va cada luz, así que cancele ese registro.

130
00:09:10,050 --> 00:09:16,060
Y vamos a cancelar ese atributo log get de atra.

131
00:09:18,240 --> 00:09:19,770
Así.

132
00:09:20,400 --> 00:09:25,740
Y técnicamente no necesitamos inventar eso, pero para que sea más fácil de ver.

133
00:09:26,250 --> 00:09:33,990
Y nos falta nuestra impresión de cierre de sesión constante para ver aquí y ahora obtenemos una lista de todos los enlaces y

134
00:09:37,320 --> 00:09:40,290
es interesante que puede ver que algunos de ellos.

135
00:09:40,380 --> 00:09:45,090
Este es el enlace a esta cosa javascript adelante cero o no.

136
00:09:45,150 --> 00:09:53,280
separados o algunos de ellos son rutas relativas como esta aquí y algunas son absolutas como esta aquí.

137
00:09:53,280 --> 00:10:01,710
Así que algunos de ellos están vacíos, no tienen un 8 Tref, algunos de ellos van a sitios web

138
00:10:01,770 --> 00:10:02,310
DE ACUERDO.

139
00:10:02,490 --> 00:10:04,730
Así que vamos a cambiarlos ahora.

140
00:10:04,890 --> 00:10:11,230
Los enlaces de blog de Compton-Rock obtuve el atributo de configuración y no es necesario registrarlo constantemente para establecer el atributo.

141
00:10:11,430 --> 00:10:17,400
Y vamos a cambiarlos para que sea lo que queremos. HGF: queremos que HPF sea W. W. Eso es HTP colon slash slash BW punto Bing punto com así.

142
00:10:17,430 --> 00:10:25,930
Y presionamos enter.

143
00:10:26,340 --> 00:10:27,930
No parece que haya cambiado nada.

144
00:10:27,930 --> 00:10:29,570
Si escribimos enlaces y solo miramos lo que tenemos.

145
00:10:29,880 --> 00:10:32,650
Cada uno ahora pasa a ser punto

146
00:10:32,820 --> 00:10:40,110
com y también podemos inspeccionar uno y podemos verlo en el inspector de elementos. Va a ser punto com.

147
00:10:40,110 --> 00:10:42,480
Y lo último que hacemos para probarlo es hacer clic en uno.

148
00:10:42,780 --> 00:10:45,870
Así que apruebe el botón de inicio de sesión o abandonemos Gmail y verá que se abre para mí.

149
00:10:45,990 --> 00:10:52,860
Para resumir, seleccionamos un conjunto de cosas una colección de enlaces y luego recorremos

150
00:10:53,580 --> 00:10:59,730
esa colección con un ciclo for y luego dentro de ese ciclo podemos

151
00:10:59,790 --> 00:11:05,580
hacer algo con cada elemento individual que luego se repetirá a todos.

152
00:11:05,580 --> 00:11:07,470
20 o 30 longitudes diferentes en esta página.

153
00:11:07,500 --> 00:11:14,310
Así que cambié el color de fondo, el borde, el color de la fuente, cambiamos la referencia y solo tuvimos que escribir algunas líneas y se aplicó a No sé

154
00:11:14,310 --> 00:11:19,500
Entonces ese es un patrón que vamos a usar mucho en los próximos videos.

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