1
00:00:00,600 --> 00:00:03,770
Hasta ahora hemos hablado de por qué dominar la denominación es emocionante.

2
00:00:03,960 --> 00:00:05,100
Por qué deberías importarte

3
00:00:05,100 --> 00:00:09,420
Los diferentes sitios que lo utilizan las infinitas posibilidades de los juegos todas las cosas emocionantes.

4
00:00:09,570 --> 00:00:12,710
Pero todavía no hemos hablado realmente de lo que es el DOM en realidad.

5
00:00:12,810 --> 00:00:16,380
Así que vamos a hacer eso en este video para comenzar, solo vamos a definirlo.

6
00:00:16,380 --> 00:00:17,180
Dio am.

7
00:00:17,220 --> 00:00:20,040
Dom significa Modelo de objeto de documento.

8
00:00:20,190 --> 00:00:24,100
El significado de esas tres palabras tendrá un poco más de sentido en las próximas diapositivas.

9
00:00:24,100 --> 00:00:26,780
Pero comencemos definiéndolo en un nivel superior.

10
00:00:26,820 --> 00:00:30,560
Dom es la interfaz entre tu javascript y tu edad.

11
00:00:30,570 --> 00:00:37,080
Tim Mounty SS Es básicamente un conjunto de objetos javascript especiales funciones de métodos javascript que podemos usar para

12
00:00:37,080 --> 00:00:42,870
interactuar con nuestro H. METRO. S. evaluar podemos cambiar cosas, podemos agregar elementos, eliminar elementos, cambiar colores,

13
00:00:42,870 --> 00:00:48,930
animar, cosas, todo tipo de maneras emocionantes de interactuar con su H. METRO. S. evaluar.

14
00:00:49,380 --> 00:00:54,270
En esta diapositiva, hablo un poco sobre cómo se construye el DOM y por qué se llama

15
00:00:54,330 --> 00:00:56,070
el modelo de objetos del documento.

16
00:00:56,070 --> 00:01:02,180
y una etiqueta con mi enlace como texto y un H-1 con mi encabezado como texto y eso es eso.

17
00:01:02,180 --> 00:01:09,210
Entonces, cuando cargamos una página de correo electrónico, se ve así en un navegador y es simplemente algo que lo elimina, por lo que

18
00:01:09,210 --> 00:01:09,950
tiene un título

19
00:01:10,260 --> 00:01:16,360
Así que cuando abro esto en el navegador veo esto, pero detrás de las escenas se crea el DOM.

20
00:01:16,380 --> 00:01:19,190
Está construido a partir de esto aquí mismo.

21
00:01:19,320 --> 00:01:24,270
Lo que quiero decir es que esta edad Tim se convirtió en un grupo de objetos javascript.

22
00:01:24,270 --> 00:01:27,440
Cada objeto modela uno de estos elementos.

23
00:01:27,450 --> 00:01:31,340
Ahí es donde obtenemos el modelo de objetos como parte del modelo de objetos del documento.

24
00:01:31,650 --> 00:01:37,530
solo para reiterar que cargamos cada equipo en el navegador, el navegador nos muestra cosas como esta.

25
00:01:37,530 --> 00:01:38,060
De nuevo,

26
00:01:38,220 --> 00:01:43,890
Pero detrás de las escenas realmente hace que este modelo de cada elemento con un objeto javascript sea

27
00:01:44,220 --> 00:01:47,490
como si modelaramos a mi perro Rusty usando un objeto javascript.

28
00:01:47,490 --> 00:01:50,770
Tenía un nombre de propiedad y otro de raza y edad.

29
00:01:50,850 --> 00:01:55,080
Estos objetos son básicamente lo mismo, excepto que el contenido es diferente.

30
00:01:55,110 --> 00:02:03,120
Van a tener cosas como el tipo de atributos de fuente de texto de etiqueta, color, color de fondo, tamaño de texto,

31
00:02:03,120 --> 00:02:07,290
todas las propiedades diferentes que están todas contenidas dentro de cada objeto.

32
00:02:07,290 --> 00:02:11,460
Definitivamente vamos a pasar mucho tiempo trabajando con estos objetos, por lo que los detalles no son importantes.

33
00:02:11,640 --> 00:02:14,970
Todo lo que quiero enfatizar aquí es que cargamos cada tim L. Se muestra en el navegador y el

34
00:02:15,120 --> 00:02:21,810
navegador toma ese Tim L y toma cada elemento y lo convierte en un objeto.

35
00:02:21,900 --> 00:02:22,610
Entonces eso cubre la parte del modelo del objeto.

36
00:02:22,680 --> 00:02:24,510
¿Qué hay del documento?

37
00:02:24,540 --> 00:02:25,860
Así que pueden ver aquí, este

38
00:02:26,070 --> 00:02:31,950
es un pequeño diagrama del tipo de estructura que obtenemos del DOM, el objeto de nivel superior, que contiene todo dentro de nuestro modelo completo del H. T. Mounseers nos llama el

39
00:02:31,950 --> 00:02:38,250
documento.

40
00:02:38,250 --> 00:02:38,930
Entonces podemos ir a cualquier página web.

41
00:02:39,120 --> 00:02:41,200
Así que tengo Google abierto y voy a escribir la estafa. La palabra documento.

42
00:02:41,220 --> 00:02:45,190
Y cuando hago eso obtengo esta gran cosa que devuelve este gran objeto.

43
00:02:45,390 --> 00:02:49,470
Excepto que no parece un objeto javascript.

44
00:02:49,470 --> 00:02:51,900
No es realmente lo que esperaríamos.

45
00:02:51,900 --> 00:02:53,740
Eso es porque el navegador me lo está escondiendo.

46
00:02:53,760 --> 00:02:56,030
Lo que en realidad me está mostrando es

47
00:02:56,130 --> 00:03:01,860
que el correo HQ parece texto, pero no me muestra los objetos reales que se modelan en este Timo.

48
00:03:01,860 --> 00:03:04,480
la consola y vamos a cancelar ese D.

49
00:03:04,740 --> 00:03:11,550
Entonces, para obtener eso necesitamos usar cancelar el punto D I R que es otro método en el objeto de YO. R. documentar todo lo que esto hará es imprimir todo el documento en esta sintaxis de objeto con

50
00:03:11,550 --> 00:03:17,430
el que estamos familiarizados.

51
00:03:17,430 --> 00:03:19,990
Así que puedes ver que es solo un objeto regular como

52
00:03:20,070 --> 00:03:25,680
los que hemos escrito por nuestra cuenta del mismo modo que el objeto Rusty the dog, excepto que aquí hay mucha más información.

53
00:03:25,710 --> 00:03:30,220
Así que tenemos cosas como fuentes o enlaces

54
00:03:30,510 --> 00:03:40,050
de imágenes, pero también tenemos cosas como el cuerpo y este cuerpo representa todo el cuerpo.

55
00:03:40,050 --> 00:03:41,040
Entonces cada elemento que ves aquí está dentro del cuerpo.

56
00:03:41,040 --> 00:03:44,320
incluyendo una llamada Nodos del Niño.

57
00:03:44,340 --> 00:03:49,710
Entonces, si abro el cuerpo verás que tenemos muchas otras propiedades,

58
00:03:49,710 --> 00:03:51,050
Así que los nodos

59
00:03:51,150 --> 00:03:57,960
secundarios nos muestran que hay un div hay una etiqueta de script y hay otro div dentro del cuerpo.

60
00:03:57,960 --> 00:03:58,590
Y si fuéramos a elementos veríamos eso.

61
00:03:58,590 --> 00:04:00,710
Así que aquí está el cuerpo dentro del cuerpo.

62
00:04:00,710 --> 00:04:03,360
Tenemos ese primer div tenemos una etiqueta de script y tenemos el segundo div.

63
00:04:03,420 --> 00:04:07,990
Y entonces, ¿qué dicen si abrimos ese

64
00:04:08,430 --> 00:04:15,480
tercer div? Esperaríamos ver dos divs más adentro si ese segundo div.

65
00:04:15,480 --> 00:04:15,890
Y si

66
00:04:15,900 --> 00:04:23,390
vamos al cónsul y miramos el segundo div y luego miramos los nodos infantiles, vemos que hay dos divs más. Así que como pueden ver, el dom se hace realmente enorme muy rápido.

67
00:04:23,430 --> 00:04:28,360
Hay cientos y cientos de diferentes propiedades y métodos, diferentes

68
00:04:28,500 --> 00:04:32,610
nodos y toda esta loca estructura de objetos anidados.

69
00:04:32,610 --> 00:04:34,730
Son tantas cosas.

70
00:04:34,890 --> 00:04:36,250
Es una de esas veces que mencioné

71
00:04:36,270 --> 00:04:39,570
al comienzo de esta clase en la que vas a tener que sentirte cómodo sin saber todo.

72
00:04:39,570 --> 00:04:42,060
Puedo decirles ahora que la mayoría de los desarrolladores no conocen la mitad de las propiedades aquí.

73
00:04:42,420 --> 00:04:46,450
Yo diría que trabajan con un 10 por ciento como máximo.

74
00:04:46,500 --> 00:04:49,200
Aquí hay muchas más cosas que casi nunca necesitamos usar.

75
00:04:49,200 --> 00:04:52,630
Y luego, en algún momento, surge algo y tenemos que hacer algo que nunca hemos hecho antes.

76
00:04:52,680 --> 00:04:57,150
Buscamos en Google y descubrimos que está bien, así que para eso está la propiedad de cambio no curado.

77
00:04:57,330 --> 00:05:03,690
No tenía ni idea.

78
00:05:03,750 --> 00:05:04,560
Y eso es realmente lo que es ser un desarrollador.

79
00:05:04,680 --> 00:05:06,500
Hasta ahora, con Javascript, hemos estado trabajando

80
00:05:06,510 --> 00:05:11,190
en un pequeño mundo controlado donde aprendemos sobre las funciones y los objetos que aprendemos sobre las variables.

81
00:05:11,190 --> 00:05:14,380
Y hay un número finito de formas de hacer las cosas

82
00:05:14,610 --> 00:05:19,110
y hay un subconjunto de conocimiento muy específico que solo necesita saber con el DOM.

83
00:05:19,110 --> 00:05:21,440
Ahora tenemos este gran ecosistema enorme para trabajar en tantas propiedades.

84
00:05:21,450 --> 00:05:25,500
Así que solo quiero reiterar que hay mucho aquí.

85
00:05:25,620 --> 00:05:28,020
Nos enfocaremos en las piezas importantes pero el objetivo no es memorizar.

86
00:05:28,170 --> 00:05:32,100
El objetivo no es dominar cada propiedad individual.

87
00:05:32,130 --> 00:05:34,780
De nuevo, 10 por ciento como máximo es todo lo que necesita para ser un desarrollador web competente.

88
00:05:34,920 --> 00:05:39,560
De acuerdo, volvamos y solo quiero repasar esto una vez más.

89
00:05:40,000 --> 00:05:43,080
Resume de lo que hablamos.

90
00:05:43,080 --> 00:05:44,450
Entonces el DOM representa el modelo de objeto del documento.

91
00:05:44,700 --> 00:05:48,030
Es la interfaz entre tu javascript y tu H. METRO. S. Es cómo podemos usar nuestro javascript para hacer cosas interactivas.

92
00:05:48,150 --> 00:05:52,150
Es cómo hacemos cosas como agregar un

93
00:05:52,280 --> 00:05:55,180
nuevo elemento a la página o cambiar el atributo ref de un enlace o

94
00:05:55,260 --> 00:06:01,800
cambiar la imagen de fondo en nuestro cuerpo o cómo podemos obtener el valor de un formulario o podemos hacer validaciones y animaciones personalizadas e interactivas los elementos en los que se hace

95
00:06:01,800 --> 00:06:07,320
clic en algún código ejecutan todas estas diferentes posibilidades, todos surgieron del hecho de que el modelo de objeto del documento conecta nuestro javascript con su H. METRO. S. acceso.

96
00:06:07,320 --> 00:06:13,160
objetos del modelo de objetos del documento nos dice que se trata de un conjunto de objetos javascript que modelan elementos en nuestro H.

97
00:06:13,410 --> 00:06:18,960
Entonces, la parte del modelo de T. cantidad.

98
00:06:19,260 --> 00:06:24,930
Entonces tenemos un ATAC aquí, terminamos con un objeto aquí que representa ese atec.

99
00:06:24,930 --> 00:06:27,470
Y luego terminamos con otro objeto que representa esta etiqueta H1 que vemos aquí.

100
00:06:27,870 --> 00:06:32,980
Por último, se llama modelo de objeto de documento porque todo lo

101
00:06:33,180 --> 00:06:37,770
que se encuentra dentro de ese objeto se llama documento.

102
00:06:37,980 --> 00:06:42,930
Es el nodo raíz donde todo lo demás vive dentro.

103
00:06:42,930 --> 00:06:43,740
Entonces, el próximo video vamos a comenzar a escribir un código.

104
00:06:43,830 --> 00:06:46,850
 

105
00:06:47,070 --> 00:06:49,030