Hasta ahora hemos hablado de por qué dominar la denominación es emocionante.
Por qué deberías importarte
Los diferentes sitios que lo utilizan las infinitas posibilidades de los juegos todas las cosas emocionantes.
Pero todavía no hemos hablado realmente de lo que es el DOM en realidad.
Así que vamos a hacer eso en este video para comenzar, solo vamos a definirlo.
Dio am.
Dom significa Modelo de objeto de documento.
El significado de esas tres palabras tendrá un poco más de sentido en las próximas diapositivas.
Pero comencemos definiéndolo en un nivel superior.
Dom es la interfaz entre tu javascript y tu edad.
Tim Mounty SS Es básicamente un conjunto de objetos javascript especiales funciones de métodos javascript que podemos usar para
interactuar con nuestro H. METRO. S. evaluar podemos cambiar cosas, podemos agregar elementos, eliminar elementos, cambiar colores,
animar, cosas, todo tipo de maneras emocionantes de interactuar con su H. METRO. S. evaluar.
En esta diapositiva, hablo un poco sobre cómo se construye el DOM y por qué se llama
el modelo de objetos del documento.
y una etiqueta con mi enlace como texto y un H-1 con mi encabezado como texto y eso es eso.
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
tiene un título
Así que cuando abro esto en el navegador veo esto, pero detrás de las escenas se crea el DOM.
Está construido a partir de esto aquí mismo.
Lo que quiero decir es que esta edad Tim se convirtió en un grupo de objetos javascript.
Cada objeto modela uno de estos elementos.
Ahí es donde obtenemos el modelo de objetos como parte del modelo de objetos del documento.
solo para reiterar que cargamos cada equipo en el navegador, el navegador nos muestra cosas como esta.
De nuevo,
Pero detrás de las escenas realmente hace que este modelo de cada elemento con un objeto javascript sea
como si modelaramos a mi perro Rusty usando un objeto javascript.
Tenía un nombre de propiedad y otro de raza y edad.
Estos objetos son básicamente lo mismo, excepto que el contenido es diferente.
Van a tener cosas como el tipo de atributos de fuente de texto de etiqueta, color, color de fondo, tamaño de texto,
todas las propiedades diferentes que están todas contenidas dentro de cada objeto.
Definitivamente vamos a pasar mucho tiempo trabajando con estos objetos, por lo que los detalles no son importantes.
Todo lo que quiero enfatizar aquí es que cargamos cada tim L. Se muestra en el navegador y el
navegador toma ese Tim L y toma cada elemento y lo convierte en un objeto.
Entonces eso cubre la parte del modelo del objeto.
¿Qué hay del documento?
Así que pueden ver aquí, este
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
documento.
Entonces podemos ir a cualquier página web.
Así que tengo Google abierto y voy a escribir la estafa. La palabra documento.
Y cuando hago eso obtengo esta gran cosa que devuelve este gran objeto.
Excepto que no parece un objeto javascript.
No es realmente lo que esperaríamos.
Eso es porque el navegador me lo está escondiendo.
Lo que en realidad me está mostrando es
que el correo HQ parece texto, pero no me muestra los objetos reales que se modelan en este Timo.
la consola y vamos a cancelar ese D.
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
el que estamos familiarizados.
Así que puedes ver que es solo un objeto regular como
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.
Así que tenemos cosas como fuentes o enlaces
de imágenes, pero también tenemos cosas como el cuerpo y este cuerpo representa todo el cuerpo.
Entonces cada elemento que ves aquí está dentro del cuerpo.
incluyendo una llamada Nodos del Niño.
Entonces, si abro el cuerpo verás que tenemos muchas otras propiedades,
Así que los nodos
secundarios nos muestran que hay un div hay una etiqueta de script y hay otro div dentro del cuerpo.
Y si fuéramos a elementos veríamos eso.
Así que aquí está el cuerpo dentro del cuerpo.
Tenemos ese primer div tenemos una etiqueta de script y tenemos el segundo div.
Y entonces, ¿qué dicen si abrimos ese
tercer div? Esperaríamos ver dos divs más adentro si ese segundo div.
Y si
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.
Hay cientos y cientos de diferentes propiedades y métodos, diferentes
nodos y toda esta loca estructura de objetos anidados.
Son tantas cosas.
Es una de esas veces que mencioné
al comienzo de esta clase en la que vas a tener que sentirte cómodo sin saber todo.
Puedo decirles ahora que la mayoría de los desarrolladores no conocen la mitad de las propiedades aquí.
Yo diría que trabajan con un 10 por ciento como máximo.
Aquí hay muchas más cosas que casi nunca necesitamos usar.
Y luego, en algún momento, surge algo y tenemos que hacer algo que nunca hemos hecho antes.
Buscamos en Google y descubrimos que está bien, así que para eso está la propiedad de cambio no curado.
No tenía ni idea.
Y eso es realmente lo que es ser un desarrollador.
Hasta ahora, con Javascript, hemos estado trabajando
en un pequeño mundo controlado donde aprendemos sobre las funciones y los objetos que aprendemos sobre las variables.
Y hay un número finito de formas de hacer las cosas
y hay un subconjunto de conocimiento muy específico que solo necesita saber con el DOM.
Ahora tenemos este gran ecosistema enorme para trabajar en tantas propiedades.
Así que solo quiero reiterar que hay mucho aquí.
Nos enfocaremos en las piezas importantes pero el objetivo no es memorizar.
El objetivo no es dominar cada propiedad individual.
De nuevo, 10 por ciento como máximo es todo lo que necesita para ser un desarrollador web competente.
De acuerdo, volvamos y solo quiero repasar esto una vez más.
Resume de lo que hablamos.
Entonces el DOM representa el modelo de objeto del documento.
Es la interfaz entre tu javascript y tu H. METRO. S. Es cómo podemos usar nuestro javascript para hacer cosas interactivas.
Es cómo hacemos cosas como agregar un
nuevo elemento a la página o cambiar el atributo ref de un enlace o
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
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.
objetos del modelo de objetos del documento nos dice que se trata de un conjunto de objetos javascript que modelan elementos en nuestro H.
Entonces, la parte del modelo de T. cantidad.
Entonces tenemos un ATAC aquí, terminamos con un objeto aquí que representa ese atec.
Y luego terminamos con otro objeto que representa esta etiqueta H1 que vemos aquí.
Por último, se llama modelo de objeto de documento porque todo lo
que se encuentra dentro de ese objeto se llama documento.
Es el nodo raíz donde todo lo demás vive dentro.
Entonces, el próximo video vamos a comenzar a escribir un código.