1
00:00:00,300 --> 00:00:03,940
Así que ahora hemos discutido por qué debería preocuparse por el Domm por qué es emocionante.

2
00:00:03,990 --> 00:00:07,640
Y también hemos hablado sobre qué es lo que significa el modelo de objetos documentales.

3
00:00:07,680 --> 00:00:13,320
El hecho de que es solo un modelo de cada elemento en una página usando objetos javascript el objeto

4
00:00:13,350 --> 00:00:15,130
de nivel superior se llama documento.

5
00:00:15,240 --> 00:00:18,340
Así que eso es genial, pero aún no hemos visto cómo hacer algo con eso.

6
00:00:18,390 --> 00:00:23,460
Entonces en este video voy a presentar brevemente el proceso de manipulación de cosas usando el perro.

7
00:00:23,790 --> 00:00:29,630
Así que reduje todo el proceso a dos palabras clave seleccionar y manipular.

8
00:00:29,670 --> 00:00:36,540
aplicamos estilos como color de fondo, borde morado, un píxel, negro sólido con javascript y Dom y población.

9
00:00:36,540 --> 00:00:43,620
Así que como ver evaluar dónde escribimos un selector para seleccionar algo con la clase de especial o todos

10
00:00:43,710 --> 00:00:47,840
h o todas las etiquetas de imagen seleccionamos elementos y luego

11
00:00:47,850 --> 00:00:51,380
También seleccionamos elementos, aunque lo hacemos de una manera muy diferente.

12
00:00:51,480 --> 00:00:56,910
Escribimos el código de JavaScript que va y selecciona los elementos y los devuelve a nosotros y

13
00:00:56,910 --> 00:01:01,260
luego cambiamos las propiedades en ellos para que seleccionemos algo y luego lo manipulamos.

14
00:01:01,290 --> 00:01:06,810
Así que en las siguientes diapositivas voy a mostrarte cómo pudo seleccionar este H-1 mi encabezado

15
00:01:06,810 --> 00:01:09,750
y cómo podríamos cambiarlo para que sea rosado.

16
00:01:09,750 --> 00:01:14,070
en los últimos videos, pero no quiero que te concentres tanto en la sintaxis como en los conceptos.

17
00:01:14,160 --> 00:01:15,290
He estado diciendo esto mucho

18
00:01:15,330 --> 00:01:18,930
Los siguientes videos entrarán en el meollo de la selección y manipulación.

19
00:01:18,930 --> 00:01:21,150
Esto es solo una descripción general de cómo funciona.

20
00:01:21,150 --> 00:01:25,600
Entonces en esta diapositiva voy a mostrar cómo se puede seleccionar esa H1 al igual que con C.

21
00:01:25,620 --> 00:01:28,580
Hay muchas formas diferentes de seleccionar un elemento dado.

22
00:01:28,800 --> 00:01:36,270
En este caso, esta línea del selector de consultas de punto del documento de código H-1 seleccionará el H-1 en

23
00:01:36,270 --> 00:01:36,920
esta página.

24
00:01:37,050 --> 00:01:40,960
Así que he resaltado aquí con este cuadro verde para que pueda ver lo que se está seleccionando.

25
00:01:41,340 --> 00:01:48,640
Así que de nuevo var H-1, esta es cualquier variable que queramos igual a documento ese selector de consulta 8: 1.

26
00:01:48,690 --> 00:01:52,420
Así que pasaremos mucho más tiempo con el selector de consultas y definiremos qué es y cómo funciona.

27
00:01:52,470 --> 00:01:59,920
Pero devuelve un objeto que representa este H1 y lo guarda en la variable H-1.

28
00:01:59,970 --> 00:02:02,190
Entonces ese es el proceso de selección.

29
00:02:02,190 --> 00:02:08,340
La siguiente parte es manipularlo para poder manipularlo. Puedo hacer todo tipo de cosas y todo lo que voy a hacer

30
00:02:08,340 --> 00:02:11,170
aquí es cambiar el color para que sea rosado.

31
00:02:11,490 --> 00:02:18,470
Así que solo escribimos H-1, que es nuestra variable que tiene el objeto que representa el estilo de punto H-1.

32
00:02:18,510 --> 00:02:24,690
propiedad y esa propiedad de estilo es un objeto enorme con un montón de otras propiedades y el color es uno de ellos.

33
00:02:24,690 --> 00:02:25,580
Esa es una

34
00:02:25,920 --> 00:02:28,920
Entonces H-1 tiene estilo pero el color es rosa.

35
00:02:28,920 --> 00:02:30,240
Y eso es todo lo que tenemos que hacer.

36
00:02:30,270 --> 00:02:35,400
Y el navegador ve que cambio esa propiedad a rosa y automáticamente actualiza lo

37
00:02:35,820 --> 00:02:37,500
que se muestra poniéndola rosa.

38
00:02:37,500 --> 00:02:41,140
Así que seleccionamos aquí y luego manipulamos.

39
00:02:42,120 --> 00:02:43,560
Así que tengo un ejemplo más aquí.

40
00:02:43,610 --> 00:02:45,230
Es un poco más complicado.

41
00:02:45,240 --> 00:02:50,610
Estamos haciendo una animación muy simple donde cada segundo cambiamos el color de fondo del

42
00:02:50,910 --> 00:02:52,940
cuerpo entre azul y blanco.

43
00:02:52,950 --> 00:02:58,620
Entonces, lo primero que debemos hacer es seleccionar el cuerpo y luego manipularlo para seleccionarlo.

44
00:02:58,740 --> 00:03:03,300
Tengo otra línea que usa el selector de consultas de volcado de documentos, que volveremos a encontrar

45
00:03:03,300 --> 00:03:06,720
en el próximo documento de video que consulta el cuerpo del selector.

46
00:03:06,780 --> 00:03:11,880
Entonces eso me da el elemento del cuerpo donde realmente me da la representación del

47
00:03:11,880 --> 00:03:15,450
objeto, el modelo que guardo en la variable del cuerpo.

48
00:03:15,450 --> 00:03:20,490
que voy a usar porque necesito saber si voy de azul a blanco o de blanco a azul.

49
00:03:20,640 --> 00:03:23,940
Entonces tengo esta variable es azul, que es solo un booleano

50
00:03:24,030 --> 00:03:28,870
Entonces comienza como falso y luego estoy usando el intervalo establecido que cubrimos hace unos años.

51
00:03:28,920 --> 00:03:32,230
Si no recuerda cómo funciona, básicamente toma dos argumentos.

52
00:03:32,340 --> 00:03:38,880
El primero es un código para ejecutar una función y el segundo es un número o un tiempo en milisegundos.

53
00:03:39,150 --> 00:03:44,880
Por lo tanto, demora milisegundos, es decir mil o un segundo y cada segundo llamará

54
00:03:44,880 --> 00:03:46,230
a este código.

55
00:03:46,560 --> 00:03:51,080
Entonces, lo que hace este código es verificar si el fondo es azul en ese momento si es así.

56
00:03:51,180 --> 00:03:56,330
Luego lo cambiamos a blanco si el fondo es blanco y luego lo cambiamos a azul.

57
00:03:56,610 --> 00:04:00,030
Entonces, para echar un vistazo más de cerca, tenemos nuestro si es azul.

58
00:04:00,120 --> 00:04:01,640
Entonces eso es solo variable.

59
00:04:01,650 --> 00:04:02,900
Comienza como falso.

60
00:04:02,910 --> 00:04:07,890
Así que la primera vez que la página carga el fondo es blanco, el azul es falso.

61
00:04:07,920 --> 00:04:15,240
Entonces, esta línea no se ejecuta, pero este otro cuerpo hace que el estilo de fondo oscuro sea igual a este color

62
00:04:15,240 --> 00:04:16,570
hexadecimal que es azul.

63
00:04:16,770 --> 00:04:18,840
Entonces eso cambia el fondo para ser azul.

64
00:04:19,140 --> 00:04:22,960
Entonces, simplemente cambiamos nuestra variable es azul de falso a verdadero.

65
00:04:23,130 --> 00:04:27,690
Y esa es una buena manera de hacerlo con el signo de exclamación o el operador no.

66
00:04:27,780 --> 00:04:32,550
Entonces este código se ejecuta nuevamente la próxima vez que el azul ya es verdadero.

67
00:04:32,850 --> 00:04:36,870
Así que este código no ejecuta body does style pero background es igual a white.

68
00:04:36,870 --> 00:04:38,550
Así que ahora volvemos a blanco.

69
00:04:38,670 --> 00:04:42,980
Esto no se ejecuta y luego cambiamos de azul a falso.

70
00:04:43,290 --> 00:04:44,980
Y eso continúa para siempre.

71
00:04:45,090 --> 00:04:49,740
Así que no es que nunca quieras algo tan distrayente como un color de fondo que cambie cada segundo.

72
00:04:50,190 --> 00:04:56,160
Pero esto demuestra que podemos hacer cosas más complejas que simplemente cambiar un H1 de negro a rosa.

73
00:04:57,450 --> 00:05:03,930
Entonces, para envolver todo esto dos palabras seleccionar manipular seleccionamos Tomamos algunos objetos que representan

74
00:05:03,930 --> 00:05:06,260
elementos y luego les hacemos algo.

75
00:05:06,750 --> 00:05:11,010
Entonces el resto de esta unidad se enfocará en diferentes formas de selección y luego

76
00:05:11,010 --> 00:05:12,370
en diferentes formas de manipulación.

77
00:05:12,390 --> 00:05:16,830
Entonces, el siguiente video se sumergirá profundamente en las diferentes formas de seleccionar elementos usando javascript.

78
00:05:17,190 --> 00:05:19,470
Hemos visto un selector ya queery.

79
00:05:19,500 --> 00:05:21,450
Vamos a ampliar eso y aprender un poco más