1
00:00:00,270 --> 00:00:05,870
Hace algunos videos introduje este concepto de seleccionar elementos y luego manipularlos.

2
00:00:06,120 --> 00:00:13,050
Así que seleccionamos una H1 o todas las etiquetas de imagen y luego podemos cambiar el color o animarlas o hacer que hagan algo

3
00:00:13,050 --> 00:00:14,660
cuando haces clic en ellas.

4
00:00:14,670 --> 00:00:18,360
Hasta ahora solo cubrimos la mitad de selección y este video.

5
00:00:18,360 --> 00:00:24,090
Vamos a presentar algunas de las muchas maneras de manipular elementos una vez que los hemos seleccionado.

6
00:00:24,120 --> 00:00:26,760
Así que aquí están las cuatro cosas principales de las que quiero hablar.

7
00:00:26,970 --> 00:00:29,320
El primero es cómo cambiamos un estilo de elemento.

8
00:00:29,340 --> 00:00:32,050
¿Cómo lo hacemos azul o lo hacemos esconder?

9
00:00:32,070 --> 00:00:34,070
Cambiar el tamaño de la fuente.

10
00:00:34,080 --> 00:00:40,320
A continuación, hablaremos de agregar y eliminar clases con javascript y luego cambiar el contenido de

11
00:00:40,320 --> 00:00:40,920
una etiqueta.

12
00:00:41,010 --> 00:00:44,490
Entonces, ¿cómo puedo cambiar el texto dentro de una etiqueta H-1, por ejemplo?

13
00:00:44,490 --> 00:00:46,590
Y finalmente, cambiando los atributos.

14
00:00:46,590 --> 00:00:52,040
Entonces, ¿cómo podemos cambiar la fuente en una etiqueta de imagen o la referencia en una etiqueta AA?

15
00:00:52,230 --> 00:00:55,260
Comenzaremos hablando de la propiedad de estilo.

16
00:00:55,260 --> 00:01:00,900
estilo es un objeto enorme con cientos de propiedades, una por cada propiedad de CSSA que podemos establecer.

17
00:01:00,900 --> 00:01:07,560
Entonces, cuando se construye el DOM y se crea un nodo individual o se crea un objeto para cada elemento

18
00:01:07,830 --> 00:01:11,220
individual, hay una propiedad llamada estilo y la propiedad de

19
00:01:11,370 --> 00:01:15,460
Por lo tanto, podemos escribir javascript que luego irá estilo y elemento de manera diferente.

20
00:01:15,480 --> 00:01:23,580
Así que aquí estoy seleccionando un elemento por su resaltado Id, así que selecciono guardarlo en una variable llamada etiqueta

21
00:01:23,580 --> 00:01:24,730
y luego manipularla.

22
00:01:24,750 --> 00:01:26,370
Y lo que estoy haciendo me estoy poniendo.

23
00:01:26,370 --> 00:01:34,190
El color de punto de estilo de punto de etiqueta para ser el borde de punto de estilo de punto de etiqueta azul es igual a 10 píxeles de color rojo sólido.

24
00:01:34,200 --> 00:01:37,830
Es importante tener en cuenta que el lado derecho debe ser una cuerda.

25
00:01:38,280 --> 00:01:43,430
Entonces, aunque en C Ss no necesitamos poner comillas en azul o alrededor de 70 P x.

26
00:01:43,440 --> 00:01:44,730
Esto no es C Ss.

27
00:01:44,730 --> 00:01:45,720
Esto es javascript

28
00:01:45,720 --> 00:01:48,820
Entonces todavía tenemos que seguir las reglas regulares de JavaScript.

29
00:01:49,080 --> 00:01:53,550
Así que tengo una página web simple configurada que voy a usar para demostrar algunas de estas propiedades.

30
00:01:54,240 --> 00:02:00,190
Entonces, esta página web es súper simple, solo un H-1, un párrafo en lugar de ese párrafo.

31
00:02:00,200 --> 00:02:05,310
Hay una etiqueta fuerte y luego dos imágenes de dos adorables mezclas de corgi.

32
00:02:05,640 --> 00:02:11,100
Cónsul y necesito comenzar seleccionando algo y voy a cambiar el color y el borde de este H-1.

33
00:02:11,100 --> 00:02:13,770
Entonces, lo que voy a hacer es ir al

34
00:02:13,770 --> 00:02:19,470
Así que tengo que seleccionarlo y hay múltiples formas de hacerlo en un documento nuevo

35
00:02:20,650 --> 00:02:22,800
que consulta al selector H-1.

36
00:02:25,320 --> 00:02:33,030
Y luego te mostraré el estilo H-1, que es un objeto gigante con toneladas y toneladas de propiedades.

37
00:02:33,600 --> 00:02:41,680
Así que voy a intentar cambiar uno de ellos como el color oscuro estilo H-1 y hacer que el amarillo.

38
00:02:42,520 --> 00:02:45,560
Y se podía ver que cambió inmediatamente a amarillo.

39
00:02:45,570 --> 00:02:54,300
Lo mismo con el borde H-1 que el estilo que el borde es igual a vamos a hacer cinco píxeles de color rosa sólido.

40
00:02:56,100 --> 00:02:56,950
Y ahí vamos.

41
00:02:57,210 --> 00:03:01,190
Así que, por supuesto, si solo quisiéramos que fuera amarillo con un borde rosa.

42
00:03:01,290 --> 00:03:04,910
Desde el momento en que se cargó la página, no hay ninguna razón para usar javascript para hacer eso.

43
00:03:04,920 --> 00:03:09,990
Acabamos de ponerlo en nuestro archivo CSSA, usaríamos javascript si quisiéramos que se tornara amarillo y un borde rosa cuando el

44
00:03:09,990 --> 00:03:15,210
usuario ha estado en la página por cinco segundos o si él quería que sucediera cuando el usuario se desplazó a

45
00:03:15,210 --> 00:03:18,670
una parte específica de la página o en el usuario hizo clic en algo.

46
00:03:18,690 --> 00:03:23,450
Se trata de hacer las cosas interactivas y veremos cómo hacerlo en breve.

47
00:03:24,960 --> 00:03:29,310
estilo es que si te encuentras manipulando un montón de archivos en un elemento

48
00:03:29,310 --> 00:03:35,430
individual como lo estoy haciendo aquí y cambiando cinco propiedades diferentes en esta etiqueta definitivamente hay una mejor manera.

49
00:03:35,430 --> 00:03:38,150
Bueno, lo bueno de usar la propiedad de

50
00:03:38,460 --> 00:03:40,740
Y hay algunas razones por las que hay una mejor manera.

51
00:03:40,740 --> 00:03:43,350
El primero es que este código no es muy seco.

52
00:03:43,350 --> 00:03:46,740
Hay un montón de estilos etiquetados de estilo repetidos etiquetados.

53
00:03:46,740 --> 00:03:50,670
Más importante aún es que existe este concepto llamado separación de preocupaciones.

54
00:03:50,820 --> 00:03:57,210
Entonces, la separación de preocupaciones es este concepto de que nuestro H M L R C S no es javascript.

55
00:03:57,210 --> 00:04:00,840
Cada uno es responsable de su pequeño dominio y no lo queremos.

56
00:04:00,840 --> 00:04:02,830
No queremos una gran cantidad de cruces entre ellos.

57
00:04:02,850 --> 00:04:08,190
Entonces en este diagrama puede ver que hay un poco de cruce entre cada equipo con el cual

58
00:04:08,190 --> 00:04:12,930
está la estructura y javascript que es ese comportamiento y luego ver evaluar es la presentación.

59
00:04:12,930 --> 00:04:18,690
Y hay una pequeña superposición con H html javascript, pero recuerde que solía ser antes de que

60
00:04:18,690 --> 00:04:25,050
aparecieran C Ss. Tenía que escribir sus estilos individualmente en cada elemento en el que usamos el atributo

61
00:04:25,050 --> 00:04:25,840
de estilo.

62
00:04:26,130 --> 00:04:32,310
En ese caso, en nuestra presentación, el diseño se tejió en la estructura y con C S ahora

63
00:04:32,310 --> 00:04:33,500
los hemos separado.

64
00:04:33,570 --> 00:04:38,710
Entonces, nuestra HMO es pura estructura y nuestro éxito es puro estilo.

65
00:04:38,880 --> 00:04:44,430
Entonces, lo que javascript encaja es que debería controlar el comportamiento de una página y, a veces,

66
00:04:44,460 --> 00:04:50,490
eso significa cambiar el aspecto de las cosas, en lugar de simplemente cambiar las propiedades dentro de javascript,

67
00:04:50,490 --> 00:04:52,620
haciendo el estilo en el javascript.

68
00:04:52,680 --> 00:04:57,530
Lo que podemos hacer es encenderlos y apagarlos dentro del archivo CSSA.

69
00:04:57,570 --> 00:05:04,270
Entonces, uno de los patrones que es realmente común es que definimos una clase CSSA como resaltar y esa clase

70
00:05:04,270 --> 00:05:08,380
de resaltar tendrá cinco o seis o muchas propiedades distintas que estamos cambiando.

71
00:05:08,380 --> 00:05:13,210
Y luego podemos seleccionar un elemento con javascript y darle esa clase de resaltado.

72
00:05:13,210 --> 00:05:18,930
Entonces, en Javascript con una línea podemos agregar una clase que luego cambiará cinco propiedades diferentes.

73
00:05:19,150 --> 00:05:22,660
Echemos un vistazo a cómo esto se implementaría en Javascript.

74
00:05:22,690 --> 00:05:29,020
Entonces, en lugar de seleccionar una etiqueta y luego cambiar el estilo, pero el color es azul y luego el borde estilizado

75
00:05:29,020 --> 00:05:35,770
es rojo fijo de 10 píxeles, lo que podríamos hacer es encontrar una clase en esa clase que se pueda llamar cualquier cosa.

76
00:05:36,250 --> 00:05:41,940
Por lo general, quiere que sea algo significativo para reflejar lo que se supone que debe hacer la clase.

77
00:05:42,040 --> 00:05:45,040
Es algo que se destaca o es una respuesta correcta.

78
00:05:45,040 --> 00:05:49,840
Un puntaje alto por la razón que sea que esté aplicando la clase intentando encontrar un buen nombre.

79
00:05:50,170 --> 00:05:56,320
Así que este no es un buen nombre, pero algunas clases de alguna clase están cambiando el color para que sea azul y el

80
00:05:56,320 --> 00:05:57,820
borde rojo sólido de 10 píxeles.

81
00:05:57,820 --> 00:06:06,280
Entonces, todo lo que tengo que hacer es seleccionar mi etiqueta y luego etiquetar la lista de la clase punto agregar una clase y eso

82
00:06:06,310 --> 00:06:12,730
dará mi etiqueta con la idea de resaltar una nueva clase llamada alguna clase en la que se aplicarán

83
00:06:12,730 --> 00:06:13,790
todos estos estilos.

84
00:06:13,810 --> 00:06:16,030
Hay algunas otras cosas que podemos hacer con la lista de clase.

85
00:06:16,270 --> 00:06:22,990
Así que en este ejemplo muestro tres métodos add que ya vimos, que es cómo podemos agregar una clase remove que toma

86
00:06:23,020 --> 00:06:29,200
un nombre de clase y elimina ese nombre de clase de la lista de clases y luego alterna la lista de

87
00:06:29,230 --> 00:06:30,760
clases, que es extremadamente útil.

88
00:06:30,760 --> 00:06:31,960
Toma un nombre de clase.

89
00:06:32,080 --> 00:06:37,570
Y si el elemento dado ya tiene esa clase, entonces lo eliminará si el elemento no tiene esa

90
00:06:37,570 --> 00:06:39,270
clase y luego lo encenderé.

91
00:06:39,280 --> 00:06:40,550
Muy muy útil.

92
00:06:40,630 --> 00:06:42,180
Lo usaremos todo el tiempo más adelante.

93
00:06:42,400 --> 00:06:46,990
Así que déjame demostrarte eso antes de volver a mi ejemplo aquí.

94
00:06:46,990 --> 00:06:49,300
De hecho, voy a definir una nueva clase.

95
00:06:49,690 --> 00:06:58,630
Entonces, en lugar de crear una nueva hoja de estilo y usar un enlace, solo voy a usar una etiqueta de estilo solo por

96
00:06:59,500 --> 00:07:00,390
el tiempo.

97
00:07:00,530 --> 00:07:04,140
Así que voy a definir una clase que vas a llamar grande.

98
00:07:04,990 --> 00:07:14,320
Y lo que voy a hacer es cambiar el tamaño de la fuente a 100 píxeles y cambiar el color a naranja.

99
00:07:15,010 --> 00:07:22,540
Y finalmente, démosle un borde de cinco píxeles de color rojo sólido.

100
00:07:22,960 --> 00:07:24,280
Así que lo dejo así.

101
00:07:24,370 --> 00:07:30,700
Si actualizo mi página, nada cambia, por supuesto, pero cuando quiero hacerlo es aplicar esa clase a algo.

102
00:07:30,950 --> 00:07:37,120
Así que voy a hacer que este párrafo tenga la gran clase para hacer, así que tengo que seleccionarlo hasta ahora.

103
00:07:37,120 --> 00:07:44,900
El párrafo es igual al documento que consulta el párrafo selector.

104
00:07:47,180 --> 00:07:47,820
DE ACUERDO.

105
00:07:48,010 --> 00:07:53,130
Y comencemos por echar un vistazo a la lista de clases y puede ver que está vacía.

106
00:07:53,140 --> 00:07:55,970
No hay clases asignadas a este párrafo todavía.

107
00:07:56,140 --> 00:08:04,090
Entonces, si quiero asignar uno, todo lo que necesito hacer es decir P-Dub class list dot add y quiero agregar

108
00:08:04,180 --> 00:08:05,310
la clase grande.

109
00:08:06,190 --> 00:08:07,240
Y ahí vamos.

110
00:08:07,720 --> 00:08:11,370
Por lo tanto, refleja automáticamente los nuevos cambios de mi hoja de estilos.

111
00:08:11,440 --> 00:08:13,540
Todo lo que tuve que hacer fue agregar la clase grande.

112
00:08:13,780 --> 00:08:18,880
Así que con suerte se puede ver que esto es mucho más fácil y que estamos separando las responsabilidades.

113
00:08:18,880 --> 00:08:24,940
Entonces, todo lo que hace javascript es activar o desactivar una parte específica de la SS en

114
00:08:24,940 --> 00:08:27,610
lugar de manipular manualmente las propiedades individuales.

115
00:08:27,610 --> 00:08:32,120
Ahora solo estamos cambiando las cosas lo menos posible en lugar de nuestro Javascript.

116
00:08:32,470 --> 00:08:42,430
Entonces, si quiero eliminarlo, todo lo que tengo que hacer es hacer clase sin clase, no eliminar grande, y mi favorito,

117
00:08:42,610 --> 00:08:45,940
que mencioné es súper útil, es alternar.

118
00:08:45,940 --> 00:08:52,170
Entonces, si presiono alternar en este momento y presiono enter, no hay ninguna clase asignada por lo que le asignará

119
00:08:52,180 --> 00:08:52,940
la clase grande.

120
00:08:53,320 --> 00:08:56,420
Ahora grande ya está asignado, así que lo eliminará.

121
00:08:56,440 --> 00:09:04,030
Así que esto es útil, obviamente, no en este caso para hacer que este color naranja loco en la clase de fuente enorme, pero lo que podríamos hacer

122
00:09:04,030 --> 00:09:09,610
es en algo así como una lista de pendientes si queremos que el usuario pueda hacer clic en él para hacer.

123
00:09:09,880 --> 00:09:11,440
Y eso lo tachará.

124
00:09:11,650 --> 00:09:15,400
Pero pueden volver a hacer clic y luego se desenredará o simplemente volverá a la normalidad.

125
00:09:15,430 --> 00:09:16,400
Eso estaría hecho.

126
00:09:16,410 --> 00:09:23,080
O podríamos hacerlo alternar una clase para que podamos hacer una clase llamada "done" y hacer clic en clic

127
00:09:23,080 --> 00:09:23,700
aplicado nuevamente.

128
00:09:23,800 --> 00:09:24,820
Se elimina.

129
00:09:24,820 --> 00:09:27,000
Ese es solo un ejemplo de cuándo puede usar alternar.

130
00:09:27,100 --> 00:09:29,740
Pero es realmente realmente útil.

131
00:09:29,740 --> 00:09:34,090
El último punto que mencionaré sobre la lista de clases es que técnicamente no es una matriz.

132
00:09:34,090 --> 00:09:37,840
Entonces eso significa que tenemos que usar un anuncio para agregar una clase.

133
00:09:37,870 --> 00:09:39,900
No podemos hacer algo como empujar.

134
00:09:40,150 --> 00:09:44,000
Solo una pequeña nota, pero es importante saber que técnicamente no es una matriz.

135
00:09:44,470 --> 00:09:48,260
Así que cubrimos dos formas diferentes de manipular el estilo a través de nuestro javascript.

136
00:09:48,280 --> 00:09:53,980
manualmente una propiedad a la vez, lo que es honestamente correcto si solo está haciendo una o dos cosas.

137
00:09:53,980 --> 00:09:55,340
El primero lo está haciendo

138
00:09:55,690 --> 00:10:01,150
Pero si lo haces en un lote o lo estás haciendo en varios elementos, es mucho mejor un

139
00:10:01,180 --> 00:10:04,930
estilo más convencional para usar una clase y activar o desactivar la clase.