Así que ahora hemos discutido por qué debería preocuparse por el Domm por qué es emocionante.
Y también hemos hablado sobre qué es lo que significa el modelo de objetos documentales.
El hecho de que es solo un modelo de cada elemento en una página usando objetos javascript el objeto
de nivel superior se llama documento.
Así que eso es genial, pero aún no hemos visto cómo hacer algo con eso.
Entonces en este video voy a presentar brevemente el proceso de manipulación de cosas usando el perro.
Así que reduje todo el proceso a dos palabras clave seleccionar y manipular.
aplicamos estilos como color de fondo, borde morado, un píxel, negro sólido con javascript y Dom y población.
Así que como ver evaluar dónde escribimos un selector para seleccionar algo con la clase de especial o todos
h o todas las etiquetas de imagen seleccionamos elementos y luego
También seleccionamos elementos, aunque lo hacemos de una manera muy diferente.
Escribimos el código de JavaScript que va y selecciona los elementos y los devuelve a nosotros y
luego cambiamos las propiedades en ellos para que seleccionemos algo y luego lo manipulamos.
Así que en las siguientes diapositivas voy a mostrarte cómo pudo seleccionar este H-1 mi encabezado
y cómo podríamos cambiarlo para que sea rosado.
en los últimos videos, pero no quiero que te concentres tanto en la sintaxis como en los conceptos.
He estado diciendo esto mucho
Los siguientes videos entrarán en el meollo de la selección y manipulación.
Esto es solo una descripción general de cómo funciona.
Entonces en esta diapositiva voy a mostrar cómo se puede seleccionar esa H1 al igual que con C.
Hay muchas formas diferentes de seleccionar un elemento dado.
En este caso, esta línea del selector de consultas de punto del documento de código H-1 seleccionará el H-1 en
esta página.
Así que he resaltado aquí con este cuadro verde para que pueda ver lo que se está seleccionando.
Así que de nuevo var H-1, esta es cualquier variable que queramos igual a documento ese selector de consulta 8: 1.
Así que pasaremos mucho más tiempo con el selector de consultas y definiremos qué es y cómo funciona.
Pero devuelve un objeto que representa este H1 y lo guarda en la variable H-1.
Entonces ese es el proceso de selección.
La siguiente parte es manipularlo para poder manipularlo. Puedo hacer todo tipo de cosas y todo lo que voy a hacer
aquí es cambiar el color para que sea rosado.
Así que solo escribimos H-1, que es nuestra variable que tiene el objeto que representa el estilo de punto H-1.
propiedad y esa propiedad de estilo es un objeto enorme con un montón de otras propiedades y el color es uno de ellos.
Esa es una
Entonces H-1 tiene estilo pero el color es rosa.
Y eso es todo lo que tenemos que hacer.
Y el navegador ve que cambio esa propiedad a rosa y automáticamente actualiza lo
que se muestra poniéndola rosa.
Así que seleccionamos aquí y luego manipulamos.
Así que tengo un ejemplo más aquí.
Es un poco más complicado.
Estamos haciendo una animación muy simple donde cada segundo cambiamos el color de fondo del
cuerpo entre azul y blanco.
Entonces, lo primero que debemos hacer es seleccionar el cuerpo y luego manipularlo para seleccionarlo.
Tengo otra línea que usa el selector de consultas de volcado de documentos, que volveremos a encontrar
en el próximo documento de video que consulta el cuerpo del selector.
Entonces eso me da el elemento del cuerpo donde realmente me da la representación del
objeto, el modelo que guardo en la variable del cuerpo.
que voy a usar porque necesito saber si voy de azul a blanco o de blanco a azul.
Entonces tengo esta variable es azul, que es solo un booleano
Entonces comienza como falso y luego estoy usando el intervalo establecido que cubrimos hace unos años.
Si no recuerda cómo funciona, básicamente toma dos argumentos.
El primero es un código para ejecutar una función y el segundo es un número o un tiempo en milisegundos.
Por lo tanto, demora milisegundos, es decir mil o un segundo y cada segundo llamará
a este código.
Entonces, lo que hace este código es verificar si el fondo es azul en ese momento si es así.
Luego lo cambiamos a blanco si el fondo es blanco y luego lo cambiamos a azul.
Entonces, para echar un vistazo más de cerca, tenemos nuestro si es azul.
Entonces eso es solo variable.
Comienza como falso.
Así que la primera vez que la página carga el fondo es blanco, el azul es falso.
Entonces, esta línea no se ejecuta, pero este otro cuerpo hace que el estilo de fondo oscuro sea igual a este color
hexadecimal que es azul.
Entonces eso cambia el fondo para ser azul.
Entonces, simplemente cambiamos nuestra variable es azul de falso a verdadero.
Y esa es una buena manera de hacerlo con el signo de exclamación o el operador no.
Entonces este código se ejecuta nuevamente la próxima vez que el azul ya es verdadero.
Así que este código no ejecuta body does style pero background es igual a white.
Así que ahora volvemos a blanco.
Esto no se ejecuta y luego cambiamos de azul a falso.
Y eso continúa para siempre.
Así que no es que nunca quieras algo tan distrayente como un color de fondo que cambie cada segundo.
Pero esto demuestra que podemos hacer cosas más complejas que simplemente cambiar un H1 de negro a rosa.
Entonces, para envolver todo esto dos palabras seleccionar manipular seleccionamos Tomamos algunos objetos que representan
elementos y luego les hacemos algo.
Entonces el resto de esta unidad se enfocará en diferentes formas de selección y luego
en diferentes formas de manipulación.
Entonces, el siguiente video se sumergirá profundamente en las diferentes formas de seleccionar elementos usando javascript.
Hemos visto un selector ya queery.
Vamos a ampliar eso y aprender un poco más