Documentación de la serie de modelo de objeto 2023: parte 3: manipulación y recorre el modelo de objeto de documento

1. Introducción a la clase: manipular el DOM: Bienvenido de nuevo a otra clase. Estoy súper, súper emocionado. Yo sólo podría saltar arriba y abajo. Gracias por quedarte conmigo. Yo soy Clyde, voy a ser tu instructor. Y esta clase es una continuación del aprendizaje sobre el DOM, el Document Object Model. Y ya sabes lo que es el DOM, ya sabes acceder al DOM. Que esta clase se trata de manipular al DOM. Por lo que muchas veces, una vez que te metes dentro de la cúpula, dentro de la causal, esos son solo los puntos de partida. El siguiente paso es moverse dentro de lo causal, dentro de la cúpula. Y en la industria del desarrollo llamada atravesar el DOM. Entonces voy a estar demostrando por qué los padres de un nodo, hermanos, hijos, cómo acceder al DOM y moverse dentro de él. Va a ser fascinante y esto son cosas muy, muy importantes a saber porque muchas veces en aplicaciones web se quiere poder permitir que el usuario agregue eliminar principales ciertos elementos. Por lo que necesitas saber cómo moverte dentro del DOM, necesitas apuntar al elemento correcto. Y por supuesto, estoy hablando de usuarios que crean elementos en una aplicación Wave. Obviamente eso significa que tenemos que crear un elemento dentro del DOM. Entonces eso es lo que también va a cubrir este curso. Va a ser IBEC. Confía en mí, no importa qué nivel de codificación o experiencia tengas. Aprenderás algo nuevo. Y no te preocupes si no te sientes tan cómodo con código que voy a estar codificando junto contigo. Vamos a estar haciendo muchos ejemplos juntos. Ya me conoces. De todos modos, basta de hablar, suficiente blubber, blubber. Espero verte en los primeros videos de conferencias. 2. Mover el DOM: Vamos a meternos directamente en este tema impresionante, atravesando el DOM. Al atravesar, sólo quiero decir, ¿cómo nos movemos arriba y abajo del árbol DOM? ¿ Sabrás cómo funcionan las estructuras familiares? Tienes padres, tus padres tienen hijos. Y si tienen más de uno, significa que tienes un hermano, excéntrico, cetera. Bueno, como resulta, para entender cómo atravesar el DOM, y todo comienza con entender cómo funcionan las estructuras familiares. Pero por supuesto aquí no estamos hablando de familias literales. Hablamos del árbol DOM. Eso sólo sucede que toda nuestra página HTML funciona de la misma manera. ¿ Qué tan guay es esto? Y como vimos en la sección anterior o en una de las secciones anteriores, todos los nodos del DOM pueden expresarse como padres, hijos, y hermanos. Pero, ¿a qué me refiero? Bueno, veamos esto. Recuerda que ese padre, ese tipo con barba, un padre de cualquier nodo, es solo el nodo que se coloca inmediatamente encima de él. Y a la hora de atravesar el DOM, existen dos métodos principales que podemos usar para obtener el nodo padre. El primer método es el nodo padre. Y el segundo método podemos usar este elemento padre. No te preocupes cómo uso estos, todas las diferencias entre ellos todavía. Por ahora, sólo quiero que den un paso atrás a un alto nivel para entender estos conceptos. Entonces ese es nuestro padre. Todo bien y bien, pero recuerda que tuvo dos hijos o qué hace el niño, el hijo de un nodo es el nodo inmediatamente debajo de él. Y lo que es interesante o lo que necesitas saber es que el programa suele ser referido a nodos que están más allá de un nivel de anidación como descendientes. Esta es solo la terminología que escucharás en el mundo de la programación y tiene sentido intuitivo. Entonces esos son tus hijos. Pero, ¿qué pasa si estamos mirando a niños dentro de una familia? Bueno, sabemos que a esto ahora se le conoce como hermanos. El hermano de un nodo es cualquier nodo en el mismo nivel de árbol que ese nodo en particular. Y lo interesante es que los nodos hermanos no tienen que ser del mismo tiempo. A lo que me refiero, Bueno, esto sólo significa que podemos tener diferentes tipos de nodos. Podemos tener notas comprometidas, toma nodos, 11 nodos. Todos estos pueden ser hermanos, no tiene que ser al mismo tiempo. Por lo que ahí lo tienes. Estos son tres tipos de nodos que tenemos en cualquier árbol DOM familiar. Tenemos paranoides, tenemos nodos infantiles, y tenemos nodos hermanos. No es tan difícil impulsa cómo mirar Fahrenheit, esto se está volviendo más intuitivo. De esta manera, LET empezar a entrar en más detalle ahora. Y codificación de pensamiento honesto también. Nos vemos en la próxima conferencia. 3. Construye nuestra página: Está bien. ¿Me conoces? Ya sabes lo mucho que me encanta la codificación y por eso quiero que solo saltemos a ello sí se agrieta. Todo lo que quiero hacer ahora con el fin de entender cómo atravesar el DOM, quiero configurarnos una bonita plantilla de trabajo, tipo de cool it. La base. A la izquierda, tengo mi código de Visual Studio la derecha puedes ver que en realidad tengo nuestro navegador. Por lo que se puede ver la rigidez hizo progreso que hacemos en el bullying son de página sencilla. Va a ser muy sencillo, un prometedor. Entonces es la base. Yo solo quiero crear una plantillas HTML5. Es genial. Titulo de este documento y atravesaré el DOM porque eso es exactamente lo que estamos haciendo. Salí afuera para ser muy sencillo. Entonces lo primero es que quiero rentar código dentro de una etiqueta principal y dentro de esta etiqueta principal. Y cuando tengo una etiqueta H1 que dice bienvenido, no quieren entrometerse en una etiqueta div debajo de eso. Eso es realmente tener una idea de Rapa. Y dentro de esta etiqueta div, Vamos a tener una etiqueta H2 con garras de sub, golpeando etiqueta MSH2 y solo digamos atravesando el DOM. Muy sencillo. Guárdalo. Bienvenido. Pasando el DOM por debajo del H2, vamos a tener una etiqueta de párrafo diciendo, ¿cómo lo hacemos? Y debajo de la etiqueta de párrafo, podemos tener otra etiqueta de párrafo que diga, quedarnos. Y te mostraré. Y si guardamos, ahí vamos y las actualizaciones en nuestro navegador. Y está haciendo esto porque estoy usando Live Server. Ya he pasado por esto antes, pero si tienes preguntas, ponlas en cunei, explica tipo de cómo funciona eso. Entonces estas ofertas div tag y solo estoy tendido automotriz, llévala conmigo y luego morimos. Y fui a net para ser un segundo envoltorio. Y dentro de esta etiqueta div, Sólo tengamos una broma del día. Por lo que incluso podemos tener una clase llamada imbécil. Y podemos decir masturbarse el día. Y el trabajo puede ser, por ejemplo, ¿cómo se llama pescado sin ojos? Y la respuesta es pescado. Y no es una broma muy buena. Pero este no es el propósito de este ejercicio. Enfriar o hielo. Ahora tenemos nuestros sitios básicos. Una que estoy queriendo hacer es quickie guide to the top aqui y agregar algo de CSS muy rapido bajo el título de UCC, Vamos a añadir una etiqueta de estilo. Y sí, con todos los elementos de nuestra página, Empecemos a peinar. En primer lugar, quiero que todos los elementos tengan una frontera. Digamos que si dos píxeles de ancho, puede ser un borde sólido y puede ser un buen tipo de borde frío lo grisáceo. Entonces ahí lo tienes. He guardado como puedes ver, lo que se ve eso en la pantalla, no se ve bien, ¿verdad? Se va a poner puja arriba. Ahora solo quiero agregar algo de relleno para establecer algún relleno de 15 píxeles en un margen de 15 píxeles. Veamos cómo se ve esto ahora. En cuanto a, estoy buscando puja a mi hosting un poco de CS extra. El islam's puede hacer que tu página se vea impresionante. Es bastante guay. Y esto solo darle estilo al cuerpo. Ahora podemos darle una mezcla. ¿ Y si no conozco 600 pixeles? Podemos cambiar la familia de fuentes. ¿ Tienen san-serif, la tripa? Se ve un poco mejor. Y solo cambiemos una óptica de color y solo lo espaciemos un poco. Entonces aquí vamos. Esta es nuestra página. ¿ Qué tan fácil fue esto? Te dije que no iba a ser difícil. Y si nos deshacemos de nuestro código y solo miramos nuestro navegador, aquí vamos. Tenemos diferentes elementos, diferentes secciones, tenemos envoltorios. Y por eso quiero poner fronteras por aquí. Porque quería que vieras tipo de lo que define un elemento del siguiente. Pero vamos a estar metiendo en esto, no te preocupes, Kate. Yo sólo quería codificar esto contigo. Espero que puedas leer junto conmigo y cómo divertirte, Solo hay algo que quiero mencionar rápidamente antes de seguir adelante. Esto es saltar a la otra pantalla. 4. ¿Por qué tenemos que transitar el DOM?: Sé que ya hemos pasado por esto antes, pero solo quiero volver a enfatizar rápidamente a EU porque es tan importante. En primer lugar, la API DOM nos permite hacer cualquier cosa a los elementos y al contenido. Y usualmente hacemos esto a través de JavaScript. Sabemos que primero necesitamos una forma de llegar al nodo DOM correspondiente. Es rutas obvias para que le hagamos cualquier cosa, necesitamos una forma de acceder a ella. Y en las secciones anteriores, discutimos cómo podemos usar la API DOM para acceder a ciertos elementos HTML. Sí, utilizamos el ID, la API selecta, esa cláusula, el nombre de la etiqueta. Fue divertido y había intuitivo y en realidad tienes la mayoría de estos plátanos. A pesar de que nos enteramos de estos métodos de acceso, desafortunadamente no es suficiente. Necesitamos un poco más. Necesitamos la cereza en la parte superior. Hemos aprendido que el DOM está estructurado como un árbol de nodos, ¿verdad? Ya hemos visto esto. Y teniendo en cuenta que el DOM está estructurado como un árbol de nodos. A menudo queremos realizar acciones sobre elementos, no necesariamente de acuerdo con el ID o nombre de clase o etiqueta, sino que tengan relaciones entre sí. Y la palabra clave aquí, por supuesto, son las relaciones. Para ello, necesitamos una forma de pasar de un nodo a otro nodo. En otras palabras, necesitamos una forma de atravesar el DOM. Y de eso se trata toda esta sección. Así que siéntate, toma un café y entrémonos en él. 5. Los 3 objetos más importantes: Antes de seguir adelante, Solo hay algo que quiero señalarte en cuanto a lo que es más importante a la hora de tratar con el DOM y probablemente ya lo sepas. Solo quiero volver a enfatizarlo porque vamos a estar entrando en mucho más detalle y mucho más avanzados en las próximas secciones y hacer solo Christie, veamos las dos primeras líneas de código R. Déjame en realidad simplemente acercar ahí si podemos ver esas dos líneas primero tenemos este doctype, y luego tenemos esta etiqueta HTML, una cabeza. Podemos tomar estas dos primeras líneas y combinarlo con el Rey de todo nuestro navegador. Podemos entonces dividir esto en las tres cosas más importantes cuando se trata del DOM y necesita tres cosas en el objeto de ventana, el documento, y el HTML. Y ya hemos visto mucho de esto antes, pero si vamos a nuestro navegador y accedemos a la consola, nuevo, déjame simplemente acercar aquí para ti. Lo que podemos hacer es que podemos hacer cosas como esta. Si realmente nos sentimos tan inclinados, podemos definir una variable llamada objeto de ventana global. Y podemos hacer de eso un signo a la ventana de valor. Y entonces por supuesto podemos acceder a este objeto de ventana global así como así. Y podemos abrirla y podemos ver todas las propiedades de la ventana. Sabemos esto, lo hemos visto, lo hemos visto. Pero es muy raro que lo estemos asignando a una variable, ¿no? Y lo mismo que podríamos hacer con un documento, podríamos llamarlo modo documento adenoide. Podríamos asignar eso con la sede del documento. Esto es muy extraño, ¿no? Nunca hacemos esta codificación. Y la razón por la que no tenemos que hacerlo es por nuestra importante la ventana y el documento es el DOM nos proporciona fácil acceso a ellos vía ventana y documento. Estos son conocidos en la industria de la programación como melodías globales. Entonces sólo significa que no tenemos que declararlos explícitamente, como acabo de hacer. Simplemente puedes agitar y usarlo directamente fuera del contenedor. Por lo que en realidad podemos sólo ventana brillante. Y tenemos acceso a las propiedades de la ventana. Podemos escribir documento y tenemos acceso a las propiedades del documento. ¿ Qué pasa con eso? Html? Deja bastante fácil de conseguir también. Sólo podemos decir que HTML, elemento HTML. Entonces podremos acceder a nuestro documento. Dentro de nuestro documento, ponemos una propiedad llamada elemento documento, y eso es lo mismo que nuestro código HTML si escribimos elemento HTML ahora, elemento HTML. Ahí vamos. Al ser nuestro HTML, tenemos la cabeza y compramos nuestro cuerpo. Y si abrimos el cuerpo, Es literalmente un código de ley. Entonces ahí vamos. Justo antes de avanzar más, quería recordarles que las tres cosas más importantes en el objeto de ventana, el documento, y el elemento HTML. Y estos son de muy fácil acceso desde el DOM porque son tan importantes. Enfriar. Y ya he dicho, creo que tienes el punto. Sigamos adelante. 6. Parent, niños y hermanos: Estamos navegando por este asidero puede parecer lento, pero confía en mí, vas a ser una protestas absolutas. Al final, acabamos de mirar nuestro doctype y nuestro HTML, las dos primeras líneas de código. Ahora empecemos a ir más lejos. Una vez que vayamos por debajo de ese nivel de elemento HTML, dom empezará a ramificarse y se pondrá muy interesante. En este punto, tenemos varias formas de navegar por nuestro DOM. Una forma en que hemos visto mucho de esto es mediante el uso de QuerySelector y selector de consultas todo para obtener con precisión los elementos que nos interesan. Para muchos casos prácticos, estos dos métodos son demasiado limitantes. ¿ Por qué podrán ser limitantes? Porque a veces no sabemos lo que estamos buscando. Y como programadores, cuando estés navegando por el DOM, te vas a estar encontrando en esta posición todo el tiempo que no estás muy seguro de lo que buscas. No tienes un selector CSS. Está bien, genial. Entonces, ¿qué hacemos? Bueno, lo que nos ayuda es esto, sabiendo que todos nuestros elementos en el DOM habitan menos una combinación de padres, hijos y hermanos en la que confiar. Visualicemos esto. Acabamos de codificar nuestro HTML. Sólo pongamos en la pantalla. Esto debería parecer muy familiar. Acabamos de hacer esto juntos. De hecho, lo único que agregué ahora fue que agregué una nota de comentario. Se puede ver que he editado, este es un nodo de comentarios. Quería sólo hacer las cosas un poco más complicadas para nosotros. Echemos un vistazo a todo nuestro código dentro de nuestro cuerpo. ¿ Qué podemos decir de esta etiqueta principal? Vamos a dibujar eso otra vez. El tag principal es tipo de cool it en el nivel muy superior. Y sí, estamos ignorando el HTML real y el cuerpo mismo, que empezando por esta etiqueta principal. Debajo de esta etiqueta principal, tenemos tres etiquetas de elementos muy amplios. No leas H1, el div, y la profundidad. En lo que va tan bien. Podemos incluso ir más profundo en el concreto de la calle. Sabemos que tenemos los H 2s y los párrafos, y todos están anidados dentro de la dosis. En lo que va tan bien. Pero ahora quiero que empecemos a mirar la relación familiar porque esto es lo que nos va a ayudar a evaluar lo que realmente nos va a poner por delante y nuestra corea. ¿ Cómo funciona esta relación familiar? ¿Cómo se ve? Bueno, sabemos que esa etiqueta de elemento principal es el padre. ¿ Y las etiquetas H1 y las dos div? Bueno, esos son los niños. ¿ Y qué hay de debajo de eso? ¿ Y todo esto H 2s y las etiquetas de párrafo? Bueno, podemos discutir día o hermanos. Entonces sí, lo tenemos. Tenemos al padre tenemos a los hijos por debajo de los niños. Tenemos muchas de estas P y H2S. Podemos algo así depende de lo que estamos viendo. Pero digamos que son hermanos que H2 y la P, Por ejemplo. Demos un paso a mirar a los niños. Ya sabes, tenemos la etiqueta H1 que en una dos etiquetas div, dijimos que esos son niños lo harán, si solo los estamos mirando de forma aislada. Sabemos que también pueden ser hermanos. ¿ Y por qué podemos decir que los hermanos lo harán? Porque sombrean el elemento principal como el padre. El elemento H1 no tiene hijos, pero los elementos div, ¿tienen hijos? los 20 años y p elementos de los hijos de los elementos div, y de todos los hijos de los mismos padres o hermanos también. Por eso llamamos a estos tintes hermanos. Pero el punto que estoy tratando de hacer es que al igual que en la vida real, el padre la relación hijo y hermano se basa en camino en el árbol que somos y ¿qué estamos mirando? Casi todos los elementos, dependiendo del ángulo con el que miramos debajo, pueden desempeñar múltiples roles familiares. Usted mismo puede tener un hijo, en cuyo caso será el padre. Las células duales también pueden tener un padre siendo tus padres, tu madre o padre. Espero que esté haciendo escenas. Espero que te diviertas, pero no te detengas. Apenas empezamos. Saltemos a la siguiente conferencia. 7. Nodo padres: En este punto, ya sabes lo importante que es para nosotros subir y bajar y Dawn, estás consiguiendo escenas de cómo leemos el árbol genealógico. Es bastante intuitivo. Y vamos a meternos ahora en un enfoque más práctico. Vamos a estar viendo qué métodos podemos usar para acceder directamente desde la API DOM para subir y bajar la calle. Entonces es súper emocionante y espero que te estés divirtiendo. También tengo este café. Aquí se puede ver una bonita, bonita, bonita, hermosa taza de café. Ah, me mantiene en marcha. No sé por qué sólo algo sobre una taza de café, sólo una tonelada de me bombea. Entonces disfruta estos nichos y vamos a meternos en ello. Déjame sólo tomar un sorbo rápido y luego nos metemos en esas promesas. Y yo estoy a pesar de que es un poco de galletas, convertirse en activo es genial. Vamos a meternos en ello. Con el fin de ayudarnos a subir y bajar el árbol DOM. Como mencioné, tenemos algunas reuniones DOM API que podemos usar, y deberías poder inferir por los nombres en cuanto a lo que hacen. ¿ Cuáles son algunos de estos métodos? Tenemos forajidos frescos, par de nodos infantiles, nodos hermanos anteriores, hermano siguiente, hijos de mano. Estos son los principales métodos que vamos a estar usando para atravesar hacia arriba y hacia abajo en DOM. Y no te preocupes, no te sientas intimidado o abrumado. Nos vamos a estar metiendo en cada uno de estos en el curso. Pero lo suficiente dicho, vamos a empezar a ver qué hacen estos. Nuevamente, levantemos nuestro código. Esto es lo que hicimos para conseguirlo. Recuerda, y el punto de partida es esta etiqueta principal, esa es nuestra envoltura para todo. Este es el punto de partida. Ahora, para este ejemplo aquí, quiero que ignoremos esa etiqueta div media. Quiero que ignoremos esa ID de rep. Entonces, solo finjamos que no lo tenemos. Sólo queremos que veamos la etiqueta H1 y la etiqueta div inferior. Y la única razón por la que estoy haciendo esto, ya que, ya sabes, la página se va a poner factores muy desordenados incluyen cada vez más elementos. Yo solo quiero que miremos a estos dos con pistas de AINE, que lo dibujemos. ¿ Qué aspecto tiene? Sabemos que tenemos el cuerpo debajo del cuerpo. Ponemos el principal, debajo de la etiqueta principal, ponemos el 81 y el div. Y dentro del div con lo que el H2 y el elemento de párrafo. Es así como podemos mapearlo. Es así como podemos pintar el DOM. Y lo primero que quiero que veamos el punto de partida es con los padres. Eso es correcto. Y como mencioné, el nombre en sí lo regala y es bastante intuitivo. Entonces digamos que empezamos por el mismo fondo de nuestro árbol, el H2 y el elemento de párrafo. Sabemos que los nodos padre, si escribimos el nodo padre método en ese elemento H2, nos vamos a devolver. ¿ Qué? Nos van a devolver su padre siendo el elemento div, tiene sentido, tiene sentido. Y de igual manera con el siguiente nivel arriba, tenemos el elemento H1, tenemos desarrollo. Ellos los nodos padre o ese elemento principal. Y por supuesto, podemos hacer exactamente lo mismo con Maine o apagado. Antes de ir más lejos, quiero que solo veamos un ejemplo de usar el mapa de padres. Digamos que nos quedaremos atrapados en la etiqueta H2. Bueno, actualmente hay forma en que todos en nuestro código, ¿cómo accedemos a propiedades en el bisabuelo de H2? Ese no es el padre, ni el padre del padre. Que la etiqueta corporal del gran abuelo, ¿cómo conseguimos todo el camino hasta el si nos sentamos en la etiqueta H2, como resulta, la respuesta a esto es bastante fácil porque se nos permite encadenar propiedades y métodos juntos. Déjame mostrarte a lo que me refiero. Saltemos a la consola o escribamos parejo. Hombre ejército fue visto esa película. ¿ Recuerdas también llamado Ace Ventura como detective infantil. Siempre es decir Todo bien entonces. Hdfs, señor. ¿ Y cómo estás esta tarde? Muy bien entonces tengo un paquete para ti. De todos modos. Estamos aquí. Y el ejemplo que queremos ver, como mencionamos antes, es que nos sentamos en esta etiqueta H2 y queremos acceder a la propiedad del cuerpo. Y por nuestro bien, solo digamos que queremos cambiar el color de fondo de todo el cuerpo a azul. ¿ Cómo haríamos eso? Vamos a nuestra consola y empecemos a ver esto en acción. Y puedes ver aquí ni siquiera la he tocado desde nuestro último ejemplo. Así que déjame despejar esta consola y ordenada. Y ahora empecemos a ver cómo funciona el nodo padre. En primer lugar, lo que quiero hacer es si vamos a la pestaña Elementos y miramos a este cuerpo, y abrimos nuestro envoltorio principal. Yo quiero llegar a nuestro H2 y eso es lo que estoy tratando de hacer. Tiene nuestro H2. Entonces si hacemos clic en membrana natural, una de las conferencias anteriores, les dije lo que eso equivale, igual signo de dólar significa. Bueno, ahora que hemos seleccionado, podemos ir a nuestra consola y podemos parar. Entonces digamos solo let h, h2 equivale a dólares ahí. Y de nuevo, así que si solo lo consolar a la pantalla, podemos ver que tenemos una broma caliente del elemento H2 día. En lo que va de momento. Tan bueno. Si estamos en este elemento y accedemos al nodo padre, recuerda, ¿qué vamos a conseguir? Eso es correcto. Vamos a conseguir todo el div que envuelve este código. Recordado. No había idea de diente rápido, ese es su padre. Pero mencioné en la conferencia Lo que es realmente genial de estos métodos específicos, podemos encadenarlos porque recuerden que queremos llegar hasta el elemento corporal. Entonces, empecemos a trabajar a nuestra manera. Existen absolutos el nodo padre, y ahora podemos acceder a su nodo padre, ese envoltorio div. ¿ Qué nos da eso? Bueno, así es, nos da este elemento principal. Si vamos a nuestro editor de codificación, ¿por qué es eso? Bueno, recuerda que empezamos en la etiqueta H2. Su padre es el div. Y este div tiene hermanos. Vayamos a uno que tenga el div. Estos son hermanos. No es su padre. Es padre es este elemento principal de esta etiqueta principal. Y los padres de los principales elementos, Hayek es el cuerpo. Como seguro ya lo has adivinado en absoluto. Tenemos que hacer X-Y-Z, lo que acabamos de hacer. ¿ Sabes qué? En lugar de volver a escribirlo, te daré un prototipo rápido. Puedes presionar la flecha hacia arriba en tu teclado y luego simplemente te da la última porción de código que escribiste. Y así en lugar de que escribamos, y de nuevo, solo podemos hacer clic en la flecha arriba. Y ahora sabemos que esto nos da el elemento principal. Todo lo que queremos hacer es acceder a su padre. Y boom, Chaka LaCa, llegamos a este cuerpo. Cómo causa. Entonces solo quería mostrarles eso como cómo realmente podemos atravesar todo el camino hasta nuestro DOM para llegar al punto de partida, que es este cuerpo. Y antes de que en realidad acabemos sí. Y cambiar el color de fondo a azul, acabo de cambiar de opinión. Pensé, ¿sabes qué? Me gustaría que trataras de darle una oportunidad por tu cuenta. Pero esta vez quiero que empecemos en la primera etiqueta div. Entonces si vuelvo a la codificación en él, quiero que empecemos en esta primera etiqueta div y un 12 Tú demasiado rápido ahora, pausa este video. Quiero que intentes acceder al elemento corporal y cambies el color, fondo, el color, toda la página para producir estos, darle una oportunidad, darle un chico. No importa si no puedes conseguirlo. Eso es lo que estoy sí, unidad completa Owens revisando unidad y no va a impactar este curso de ninguna manera. Yo solo quiero que aprendas y quiero que obtengas el máximo provecho de este curso. Entonces pausa el video y le voy a dar una oportunidad. Y luego en los próximos segundos te voy a mostrar cómo hacer una escuela para que puedas pausar ahora. Está bien, hecho. Espero que le hayas dado una oportunidad. Entonces como mencioné, quiero empezar en este elemento div. Sólo tienes que volver a nuestra consola. Vamos a aclarar todo. El primer consejo es que quiero que accedamos al resto. Dije que quiero empezar, fecha y uso podríamos simplemente escribirlo en nuestra consola directamente. Pero quiero que demos pasos a este enfoque porque como programador, tenemos que ser lógicos. Y verás que es mucho más fácil lógicamente niños de alguna manera en escribir una larga cadena de código, a diferencia de ver eso. Entonces, ¿cómo hacemos eso? Entonces digamos que deja que dv sea igual a qué? Bueno, en este caso sabemos que podemos usar nuestros métodos de acceso DOM para poder acceder a nuestro documento. ¿ Cuál vamos a usar? ¿Esa cantidad? Podemos usar unos cuantos. Tiene una identificación de rapido, no nosotros. Entonces podríamos usar, y solo voy a usar elementos de Git, obtener elementos por nombre de etiqueta, Nano, el nombre de etiqueta que tiene div. Y como dije, quería que usáramos la primera captación. De acuerdo, Entonces si un análisis de registro de consola, asegúrate de que el correcto, y ahí vamos, es el final correcto porque tiene una identificación de Rapa. Podríamos haber usado get element by ID. Hay muchas maneras de despellejar un grano de gato, pero ¿qué queremos hacer ahora? Bueno ahora queremos acceder a los abuelos y definamos una variable llamada abuelo. Y el abuelo que va a empezar en el div. Vamos a tener que conseguir su nodo padre. Entonces vamos a tener que conseguir su nodo padre. Entonces vacunas. Entonces estoy un poco empezando en los nodos padre derivados van a ser el elemento principal y su nodo padre va a ser el cuerpo. Si regresamos esto y con teclear el abuelo, ellos vamos, tenemos la etiqueta del cuerpo. ¿ Qué tan cool somos nosotros? Y sí, hagamos exactamente lo que necesitábamos hacer. Accedemos a la propiedad de estilo y cambiamos el color de fondo a azul. El pegamento necesita estar en notación de cuerdas. Perdón. Ahí vamos. Whoo, eso ha traído a un amigo que tiene espantoso a los ojos. Pero de todos modos, espero que te hayas divertido en esta conferencia, herbicida para sentirte más intuitivo por encima de padre de nodo. Está bien, ¿verdad? Y es intuitivo. Acabamos de trabajar nuestro camino desde el fondo del árbol DOM hasta arriba. No es tan difícil, apareciendo finito. No estamos del todo terminados. Yo quiero saltar de nuevo a nuestras líneas anteriores que queremos. Y quiero que empecemos a cavar en más de estos métodos. Siena. 8. Previous: Me estoy divirtiendo. Aquí es donde lo dejamos desde la última vez. Miramos el nodo padre y un hub se está volviendo más intuitivo. Entonces esto son los padres, este es el nodo padre. Ahora quiero que miremos a los hermanos, a las rivalidades de los hermanos. Y de nuevo, empecemos por el fondo de nuestro árbol DOM, el NH2 y el párrafo. Sabemos si estamos empezando en la etiqueta H2, que el siguiente método de hermanos nos devolverá el párrafo. Como mencioné en el anterior más tarde, las palabras mismas, los nombres de los métodos son tan intuitivos, como debes saber lo que van a hacer antes de explicarlo. Y si empezamos por la etiqueta de párrafo y queremos volver a la etiqueta H2. Sí, el método se llama hermano anterior. Lo mismo si estamos a un nivel arriba en el árbol, empezamos en uno, yendo a los derivados el próximo hermano. Y por supuesto, si agregas un div y quieres que te devuelvan 81, solo puedes llamar al método hermano anterior. Impresionante. Entonces esta es la cama de hermanos otra vez. Ya me conoces hombre, me encanta ver ejemplos prácticos. Así que saltemos rápidamente a la consola y echemos un vistazo a cómo podemos usar la siguiente inacción de hermanos. A ver ahora, pensé que este sería un lugar brillante para que nos detengamos rápidamente y miremos cómo funciona el hermano anterior. Entonces, ¿qué es un ejemplo que podemos hacer? Bueno, echemos un vistazo a esta etiqueta de párrafo aquí. De acuerdo, si en realidad seleccioné nosotros en este párrafo, Digamos que queremos acceder a la broma del día, su hermano, a su hermano anterior, y queremos cambiar este color de fondo a azul. ¿ Cómo haríamos eso? Aquí hay algo que puede sorprenderte. Entonces vamos a la consola. Y como vimos en conferencias anteriores, sólo podemos definir nuestro párrafo por el ítem actualmente seleccionado en nuestro DOM mediante el uso del signo de dólar 0. Ahora si definimos y tratamos de acceder al hermano anterior, ya se puede ver en la consola que no ha regresado. Esa broma H2 del día que ha regresado. Esto toma nota, ¿qué pasa con eso? Bueno, durante el estrés van a saltar adelante. Vamos a estar buscando en detalle las diferencias entre hermanos anteriores. Y si intentamos acceder y otros elementos, verás aquí este anterior elemento de hermanos. Esas son dos cosas diferentes, muy cercanas, pero son diferentes. Y uno de los matices del hermano anterior es que también incluye todo tipo de nodos, no solo nodos de elemento. Entonces si miramos lo que realmente es el texto, se puede ver aquí que es un retorno, es un personaje. Entonces si lo cerramos, la razón que está sucediendo si vamos a nuestra consola aquí, esta declaración realmente devuelve después de la etiqueta H2 para llegar al párrafo. Déjame mostrarte que no solo estoy hablando basura. Si elimino todos los caracteres entre las dos etiquetas, eso debería funcionar. Ahora, volvamos a nuestra consola. Vamos a refrescarnos. Aquí. Vuelve a empezar. Entonces deja que P sea igual al ítem actualmente seleccionado, que sabemos es el párrafo. Y ahora si accedemos al hermano anterior, eso debería funcionar. Los vinos finos no funcionan. No se le ha definido, lo siento. Entonces vamos a refrescarnos. En realidad tengo que volver a presentarlo. Entonces vamos a seleccionar nuestro párrafo. Se va a la consola. Ahora lo podemos hacer. Dejar p igual $1. Y ahora podemos acceder a su hermano anterior, igual que lo hicimos la última vez, pero ahora no tenemos espacios ni personajes extra en el medio. Golpeamos Return y day vamos con literalmente consiguió esta clase de alegría y tenemos el H2. Esto es exactamente lo que queríamos. Y para demostrártelo, podemos acceder a ella. Cambio de estilo, fondo, color a azul. Ahí lo tienes. Inicio costa para tener sentido si no estás seguro, lo que acabo de hacer, No se preocupan, vamos a meternos en ello más tarde por ahora. Es así como trabaja el hermano anterior. Nos vemos en la próxima conferencia. 9. Niños, firstChild y firstChild: Estoy emocionado y estoy disfrutando de las cosas. Estaría amando un dos. Acabamos de mirar sublinks, vimos cómo funcionan esos. Miramos, uh, uh, los métodos antes que los hermanos. Recuerda lo que miramos, miramos a los padres, pero ¿cuál es el amor de cada padre? Eso es pudrición. Vamos a tener unos hijos. Los padres aman a sus hijos. Y quizá estés pensando que esto va a ser tan fácil como los demás. Y déjame advertirte, no es cuando empieza a tener dos hijos. Tenemos muchos métodos disponibles para nosotros y algunos de ellos, como, ya sabes, tiene intuitiva como los otros, pero está bien. eso estoy aquí y para eso vamos a ver. En primer lugar, quiero que empecemos por mirar los métodos del primer segundo hijo. De acuerdo, Entonces, ¿cómo funciona el primer segundo hijo? En primer lugar, la sintaxis del método es primer hijo y trabajo perdido. Y las propiedades primero-hijo último hijo se refieren a los padres primero y último elemento hijo. Déjame mostrarte a lo que me refiero. Empecemos por esa etiqueta div. ¿ Cómo se relaciona esa edad con ella? Bueno, como se podía adivinar, ese es el primer hijo del div. Si miramos la etiqueta del párrafo, como sospecharías, es el hijo perdido del div. Nuevamente, veámoslo desde el punto de vista de los principales elementos. Es primer hijo es un 20 GHz, es niño perdido es la etiqueta div. Pero ahora ¿qué pasa con este elemento corporal? Aquí podemos ver que el padre, este cuerpo sólo tiene un hijo. Caso de disposición. No es tan difícil. Podemos deducir que el primer hijo y el niño perdido apuntarán exactamente al mismo elemento. ¿ Y qué pasa con el elemento no tiene un hijo? Mira nuestra etiqueta H1, no tiene hijos, ¿verdad? En ese caso, estas propiedades van a devolver nulo. Por lo que el primer hijo y el hijo perdido regresarán. Ahora, en este punto podrías estar pensando, hombre, esto es súper simple. Bajo. El complicado en comparación con las otras propiedades que hemos mirado hasta ahora es la propiedad de los niños. Esto es sólo un poco más complicado, pero de nuevo, con un poco de práctica y un poco de ejemplos prácticos, verás que no es tan difícil cuando accedes a la propiedad de los niños en un padre, básicamente obtienes una colección de niño elementos que tiene el padre. ¿Tiene sentido? Y recuerda, miramos los métodos de acceso en el DOM cuando vendimos eso. Algunos de esos métodos como getElementsByClassName, getElementsByTagName, son colecciones convertidas. Aquí es lo mismo. Pero como vimos en conferencias anteriores cuando usamos getElementsBytagName, nombre clase, etcétera, etcétera. A pesar de que esas colecciones parecían una matriz, no eran una matriz verdadera. Por lo tanto, ten eso en cuenta. Esta carga se ve y se siente como una matriz. En este caso, cuando accedemos a la propiedad child, no es una verdadera matriz. De esta manera, podemos iterar a través del proceso de recolección o acceder al troyano de forma individual, igual que vamos a estar viendo en nuestros ejemplos y como lo hicimos anteriormente. Y si rápidamente, la condena que nos regresó de esta propiedad georgiana sí tiene esa propiedad de enlaces automáticos que nos dice cuántos artículos hay en la colección. Y entonces por supuesto nos permite bucear a través de él. Si tu cabeza está girando ahora mismo, por favor, no te preocupes, vamos a codificar y vamos a ver cómo se ve todo esto en breve. Entonces déjame solo mostrarte tipo de otras obras de propiedad a corto plazo. Pero esta vez quiero empezar por arriba, mirando el cuerpo y estamos mirando a sus hijos y decimos que queremos acceder a ese elemento principal. O tendrías que hacer era empezaremos con el cuerpo. Vamos a existir. Es propiedad infantil. Y para obtener el primer elemento de la colección, igual que una matriz, accedemos a ella desde su número de índice. Y sabemos en JavaScript y muchos otros lenguajes y la API DOM, el primer elemento de la matriz comienza en la posición 0. Entonces no es tan difícil. ¿ Qué tal ahora si queremos conseguir esa etiqueta H1 y agregamos el elemento principal, cómo haríamos eso? Nuevamente, comenzamos en el elemento principal. Accedemos a su propiedad infantil y accedemos al primer elemento en esa matriz. Es intuitivo. Y con el div, sabemos que ese es su segundo trabajo. Por lo que accedemos al elemento principal, accedemos a su propiedad infantil, pero esta vez accedemos al segundo ítem de la matriz, que por supuesto nos devolverá ese desarrollo. Por supuesto, podemos hacer exactamente el mismo proceso con el H2 y el P, Pero esta vez de reutilizar la paloma como punto de partida para que los niños se enfrenten, Es hacer escenas. Pero ahora realmente sí quiero saltar a la consola. Este es un tema importante para nosotros dominar. Ya voy a ver. 10. Niños - Ejemplo:: Trabajar con niños es averiguar sí o no. ¿ Piensas también en el mundo real? Pero, ya sabes, es, es lo mismo con el DOM. Los niños pueden ser difíciles, eso puede ser terco, y piensan que lo saben todo. Entonces, de todos modos, eso es lo que vamos a tener que lidiar. Sí. Y quiero que pasemos un poco de tiempo con los niños. Por lo que hasta verás en la próxima conferencia vamos a entrar en más detalle. Sí, sólo quiero algo así, ya sabes, pensé que nos saltemos de las diapositivas que solo estamos viendo. Y veamos aquí algunos ejemplos prácticos de trabajar con niños. Entonces déjame solo deshacerme de mí mismo para que puedas ver Beta Adios. Y veamos este cuerpo nuestro. Yo quiero que realmente miremos el elemento corporal en sí. Entonces volvamos a nuestro editor de textos aquí. Quiero mirar este elemento corporal y quiero mirar su propiedad infantil. ¿ Cuántos hijos crees que debería tener? Podría haber habido un poco de una pregunta engañosa. Sólo tiene una propiedad directa infantil, el elemento principal. De acuerdo, Así que ahí tiene nuestro editor de texto. Y lo que es realmente genial mientras que antes de empezar a codificar aquí es que el cuerpo es directamente accesible en el propio objeto del documento. Por lo que sólo podemos decir que los niños de cuerpo magro se asignen al elemento cuerpo del documento y con en red. Recuerda a qué eje queremos acceder a los niños, lo extrañamos. Y recuerda que regresó. Eso es correcto. Devuelve una colección de todos sus hijos. Entonces si golpeamos Return y consolamos cerramos esta sesión, obtenemos una colección HTML. Realmente sabemos lo que es una HtmlCollection. Entonces, ¿qué tan genial es esto? ¿O agregar? Es por ello que necesitamos aprender lo básico porque todo se basa el uno en el otro. Y podemos ver esta colección está conformada por dos artículos. No te preocupes por el guión. Este script es mi servidor en vivo que se inyecta automáticamente por el servidor en vivo para que esto se ejecute directamente desde mi Código Visual Studio para todos los propósitos prácticos, solo tenemos un elemento en esta colección y ese es este elemento principal. Recuerda lo que dije sobre que la HTMLCollection siendo algo así como una matriz lo hará, porque es algo así como una matriz. Podemos acceder al método completo y en realidad podemos recorrer todos los elementos de la matriz. Entonces digamos que queríamos realmente tener un borde rojo alrededor del elemento del cuerpo. ¿ Cómo haríamos eso? Bueno, solo podemos usar un sencillo for loop. Entonces para I igual a 0, yo menos que. Recuerda cómo dijimos que el cuerpo Jordan tiene una propiedad de longitud para que podamos acceder directamente a ella. Y por supuesto, cada iteración queremos aumentar I. Esto es muy sencillo. Sabrás hacer esto. Esto es sólo un bucle for simple. ¿ Qué queremos hacer en cada iteración? ¿ Fuimos a acceder a su hijo? Por lo que esto debería decir que el niño está asignado al valor de los niños corporales. Y dependiendo de dónde estemos en el bucle, devolverá a ese niño específico y siempre ha estado queriendo hacer es querer cambiar ese borde de estilo a, digamos sólo cinco píxeles, gradiente sólido. Ahí vamos. Hagámoslo. ¿ Eso tiene sentido? Entonces vamos a dar vuelta. Y boom, acabamos de hacerlo. Hemos hecho un trabajo increíble. Sí. Entonces ahí vamos. Hemos accedido al cuerpo niños. Nosotros lo hemos hecho en bucle. Y sé que no tenía mucho sentido recorrer porque en realidad sólo teníamos un artículo. El principal, yo sólo un poco quiero, quiero que tengas una sensación intuitiva de cómo podemos usar loops y niños y HTMLCollection. ¿ Está haciendo sesgar a los santos 100, no del todo hecho. Hay una cosa más que quiero mostrarte ahora, este fue una especie del ejemplo simple intuitivo uno es algo más que podría ser un poco menos intuitivo, podría ser un poco una pregunta truco. Lo que quiero hacer es que queramos que accedamos a nuestra etiqueta H1. ¿ Crees que los hijos de la etiqueta H1? Volvamos a nuestros datos de texto para ver esa etiqueta H1. Ve bienvenido. ¿Hay algún hijo de esa etiqueta H1 será intuitivamente, pensarías que no. Recuerda dónde está el diagrama, sin hijos y ya sabes, esperarías que sea nulo para los niños. Bueno, echemos un vistazo a nuestra consola si ese es el caso. alerón, no lo es. Pero de todos modos, empecemos accediendo a esta etiqueta H1. ¿Cómo hacemos esto? Nuevamente, podemos utilizar cualquiera de nuestros métodos de acceso DOM. Por lo que comenzamos accediendo a la raíz de nuestra página web siendo el documento sobre ese atlas de eje de fin de semana, Dora, de diferentes métodos de acceso. Simplemente voy a usar getElementsByTagName de nuevo, porque sabemos que sólo tenemos una etiqueta H1 en nuestro documento. Vamos tenemos nuestro 81. Hasta puedo bloquearlo para ti. puede ver que es una HtmlCollection y Nissan cada uno. Genial, así que tenemos las pistas H1 ahora eje su propiedad infantil. ¿ Cómo hacemos nosotros, cómo haríamos eso? Bueno, en realidad quiero salir del elemento H1 en un auto de órbita no esta colección. Por lo que accedemos ahora a la colección, quiero el primer elemento de esta colección y luego vamos a acceder a su propiedad infantil. ¿ Qué esperarías ver? Nosotros aquí tenemos una HtmlCollection sin nada en ella. Y eso es intuitivo. Eso es lo que esperaríamos, ¿verdad? Dijimos que eso no tiene hijos. Tan cool. Todo está bien y bien, pero ¿qué pasa si usamos primer hijo y niño perdido? ¿Qué pasaría ahí? Podría estar pensando también se esperaba que no contuviera nada. Entonces vamos a ver, vamos a ver. Por lo que accedemos a H1, el primer elemento de esta colección, y ahora quiero que accedamos a primer hijo. Si regresamos eso, obtenemos esta bienvenida toma nota fue volando tu mente. Por lo que esta etiqueta H1 en realidad sí tiene un hijo y el niño es el gusto mismo. Es este gusto bienvenido. Y debido a que sólo tiene un niño toma hijo, se esperaría que fuera lo mismo si escribimos niño perdido cuando cerca de sí. Y es lo mismo. Y Augusto es el bit que es un poco menos intuitivo, es que el primer hijo y niño perdido devuelve cualquier tipo de nodo hijo, incluyendo toma notas que cuando accedemos a la propiedad troyana, sólo nos devuelve eliminar nodos. Es por ello que eso devolvió una colección vacía versus primer hijo y niño perdido, que en realidad nos devolvió el sabor. No te preocupes demasiado por las diferencias entre primer hijo e hijos. Nos vamos a estar metiendo en ello en las escuelas por ahora para empezar a entenderlo. Algo más que es interesante es si solo querías que los elementos hagan otra propiedad. Por lo que este eje, nuestro primer elemento H1 en esa colección. Y en lugar de escribir primer hijo, podemos hablar de primer elemento niño, que devuelve intuitivamente el primer elemento e hijo de este elemento en particular. Y como sabemos que no tiene ningún elemento hijos, va a volver nulo, que es lo que esperábamos y lo que vimos en las diapositivas previamente. Hemos hecho mucho y gracias por estar conmigo. Y tuve que firmar para entender estas cosas. Dificultad. Y cuanto más trabajes con él, más intuitivo es. No quiero que esto intimide. No debería tu dominado esto, ninguno de ustedes divirtiéndose. Y como los niños son tan importantes, quiero que solo hablemos de los niños y épica más detalle hace algunas cosas realmente, realmente geniales e interesantes. 11. Niños y descendientes: Como mencioné, los niños son tan importantes a la hora de trabajar con el DOM que necesitamos quedarnos un poco más en él. Sabemos que los niños son solo elementos que se anidan directamente debajo de otro elemento. Pero vamos a dar un paso atrás. Y elemento HTML puede tener muchos niveles de otros elementos anidados debajo de él. Y todos estos elementos anidados se llaman descendientes de nuestro elemento inicial. Y en nuestros ejemplos anteriores, incluso hemos visto que hay un montón de agradable a los elementos de abajo, digamos nuestro elemento corporal. Pero este tipo especial de descendiente y este descendiente espacial es un elemento que es un nivel de equipo agradable por debajo de un nodo dado. Y se llama elemento. Y un elemento hijo importante, sólo puede tener un padre. Sabemos que todo gusto en tu HTML es también un nodo toma en el DOM, una x, y. y vendimos en especie de peculiar matizado cuando miramos nuestra etiqueta H1, que podemos decir es el padre, cuando tratamos de acceder a su primer hijo y niño perdido, pensando que iba a volver nulo. Vimos que realmente regresó se toma porque eso toma, es un niño, es un toma nota del del padre ya que tiene sentido. Otra cosa que vale la pena mencionar, la SEC, tenemos una variedad de métodos disponibles para nosotros que nos permiten mirar a los niños y a los niños propiedades. Ya hemos visto algunos de estos, pero los que quiero concentrarme ahora en esos nodos infantiles fríos y niños. Veamos las diferencias entre esos métodos. Nodos hijos e hijos. Vamos a plop en nuestra pantalla aquí. Y veamos las diferencias. En primer lugar, si usamos nodos hijos, va a devolver una lista de nodos. Y recuerda que incluso hemos pasado por la lista de nodos previamente en nuestras naturalezas. Cómo se enfría en una lista desordenada pueden contener cualquier tipo de nodo, ¿verdad? Recuerda, por lo que sabemos que acceder a nodos hijo de punto devuelve o nodos hijos incluyendo nodos de texto. tanto que si nos fijamos en la propiedad de los niños, sabemos que eso regresó en colección HTML. Sabemos que podemos acceder al método dot Jordan en cualquier elemento porque es propiedad de un elemento. Y sólo las prendas tienen esta propiedad infantil. Debido a esto, sabemos que estos hijos son todos de tipo elemento que sólo contiene un tipo de elemento. Y net es la mayor diferencia entre child know y children en net child nodes devuelve una lista de nodos de cualquier tipo de nodo usando el método children, otro lado, solo devolverá un nodo elemento. Sí, nos adivinaste en la teoría del título. Vamos a saltar al editor de texto y quiero pasar por un ejemplo que te muestre la diferencia entre estos dos. 12. Niños vs. childNodes un ejemplo: Ahora mismo quiero que paguemos nodos infantiles versus niños Mackay, el que devuelve una nueva lista, ese devuelve una colección HTMLCollection. Ya hemos visto esto, pero echemos un vistazo a estos dos ejemplos prácticos rápidamente. Entonces, vamos a llevárselos. Este es nuestro código normal que hicimos juntos que hemos estado haciendo a través toda esta sección en una prueba para no agregar más a este código. Específicamente, quiero que agreguemos una lista. Añadamos una etiqueta de lista desordenada dentro de eso, vamos a tener tres elementos. Elemento uno, y haremos otros dos artículos, ítem 2 y el ítem 3. Ahí vamos. Guardemos esto. Y vayamos a nuestra página web. Podemos ver aquí tenemos el ítem 1, 2, y 3. Nos acabamos de sumar. Eso está claro la consola. Ya puedes ver que estoy haciendo esto en tiempo real. Por cierto, esto, este es exactamente el código que dejamos la última vez. Permítanme simplemente refrescar la página en la consola. Entonces aquí estamos un lienzo en blanco. Will en primer lugar, quiero mirar a este niño nodos. Echemos un vistazo a eso primero. Entonces vamos a agarrar nuestra u, nuestras varillas son lista desordenada. ¿ Cómo podemos hacer eso? Bueno, de muchas maneras otra vez, solo voy a usar el que hemos estado usando recientemente y es getElementsBytagName. Nuevamente, el nombre de la etiqueta aquí es la URL. Sabemos que sólo tenemos un elemento UL dentro de todo nuestro documento. Por lo que va a ser una HtmlCollection con un elemento en ella. Y yo solo quiero realmente existir ese artículo directamente. Entonces por eso estoy accediendo al primer ítem. Y Amy, y esa debería ser nuestra etiqueta UL si ahora accedemos a nodos infantiles. ¿ Qué crees que eso va a devolver el enlace? Sólo se van a devolver tres artículos, ítem 123. No, no es un es todos los puntos que estoy tratando de hacer. Los nodos restantes y secundarios devuelven una lista de nodos, lo que significa que va a incluir todo el texto y llevar los frenos y devoluciones en nuestro documento. Por eso si lo abrimos, en realidad son siete artículos. Entonces sí, sí tiene nuestras tres etiquetas LI. Ahí está el uno, ahí está el segundo, el tercero. Eso en medio sabemos que tenemos estos retornos. Entonces si abrimos este texto, podemos ver que el valor del nodo es un retorno y son todos los espacios. Volvemos a nuestro editor de textos. Es literalmente el regreso. Y todos los espacios. ¿ Tiene sentido? Entonces la siguiente diapositiva, ¿cómo podríamos, por ejemplo, recorrer todos esos elementos y cambiar el color de fondo? Bueno, dejemos de lado el bucle por ahora. Lo que podríamos hacer es que pudiéramos acceder al primer elemento infantil, no pudimos ganar. ¿ A qué me refiero con eso? Me salvará quería cambiar la primera etiqueta LI para leer. Lo que podríamos hacer es empezar con nuestra lista desordenada. Podemos acceder al primer elemento niño. Podemos entonces obviamente darle estilo a ese color de fondo y podemos hacer que esa tasa igual, por ejemplo. Entonces ahí vamos. Esa es una forma de hacerlo, pero esto es bastante engorroso, no importa porque sólo podemos acceder a un elemento a la vez. Aquí accedemos al primer elemento niño, no al primer hijo. Recuerda, el primer hijo también devuelve tipo de cada tipo individual de intución nerd que toma, Así es como accedemos al nodo de primer elemento. Entonces, ¿cómo podemos usar un bucle? ¿Alguna idea? Will, de esta manera podemos usar a los niños. Recuerda, quería comparar nodos infantiles, que hemos mirado. Y quiero comparar niños, niños retornos y htmlCollection. Y ya sabemos que una HtmlCollection sólo tiene que consistir en notas. Entonces hagámoslo. Ahora los definamos, voy a niños como ser la URL. Ahora quiero acceder a la propiedad infantil. ¿ Tiene sentido? Si consolamos cerramos esta sesión, solo podemos confirmar antes de empezar a codificar nuestro for-loop que esto devuelve una HTMLCollection ahora con solo tres etiquetas LI. Y cómo nos movemos por esta pared, igual que un for-loop normal, me pregunto, sí, déjame solo usar esto como silla de plantilla para LET I es igual a 0 niños del cuerpo, pero ahora no es niños del cuerpo. Hemos definido nuestra variable como niños UL y sabemos que tiene una propiedad de longitud. ¿ Cómo sabemos que tiene una propiedad de longitud? Will puedo abrir esto y mostrarles que hay una propiedad de longitud de tres. Por lo que sabemos que queremos iniciar nuestro bucle a 0. Queremos seguir adelante hasta que llegue a esa longitud de tres. Y cada iteración obviamente queremos aumentar nuestro máximo en uno. Entonces queremos que en realidad acceda a cada etiqueta LI. Y sabemos que las etiquetas LI van a ser la lista desordenada lista niños y va a acceder a eso específicamente y a lo que estamos queriendo hacer ahora. Está bien. Podemos quedarnos con el vamos a hacer que sea un borde azul cada uno. Y golpeamos retorno. Niño no está definido, lo siento. Este es el eje x. De nuevo, no es niño, está vivo. Eso debería funcionar ahora hit return y el rigor que acabamos de recorrer cada etiqueta LI. ¿ Qué tan cool somos nosotros? Sé que podrías estar pensando en este punto nosotros en una escisión, complicada, pero extracto. No te preocupes, vamos a estar construyendo las breves páginas prácticas en este curso y nos estamos haciendo más avanzados a medida que avanzamos, verás que todas estas se están tirando entre sí. Ya lo sabemos ahora de nuevo con listas de nodos HTMLCollection. Hemos pasado por esto en una sección anterior, por lo que debes estar familiarizado con lo genial que se adjunta. Eso es realmente divertido cuando es DOS como jalar el uno del otro, vemos los efectos prácticos. Entonces, de todos modos, sigamos adelante. No quiero parar. Nos vemos en la próxima conferencia. 13. Desafío: introducción: ¿ Sabes para qué es hora de nuevo? Eso es correcto. Es hora de un gusto. Pon a prueba tus conocimientos. Me encanta. Entonces lo que voy a hacer ahora, alguna iniquidad, le da el sabor la pregunta. El siguiente cuadro, obviamente voy a pasar por el ejemplo contigo, así que por favor pruébalo por tu cuenta. No te preocupes, se van a intimidar, sólo debe ser divertido. Y creo que lo conseguirás. Creo que tú, tus fuentes a las matemáticas para entender cómo hacerlo. Entonces vamos a cortarlo juntos y se va a literario y tomar unos segundos mientras yo quiero hacer es crear una etiqueta HTML simple. Dentro de una etiqueta, quiero que tengamos una lista desordenada dentro de nuestro HTML. Obviamente, tenemos que tener un cuerpo, ¿no? Esta es una buena práctica dentro de eso, quiero que tengamos una lista desordenada. Podemos decir que estos son mis pequeños artículos de lista cool. Entonces el EEG, sólo podemos comentar eso fuera. Y yo sólo quiero tener cinco listas. ¿ Voy a querer? Y eso puede ser el punto uno. ¿ Verdad? Este puede ser el punto dos. Tema tres. Artículo para un ítem cinco, ahí tienes. Y esto es una tautología. Sólo va a tomar unos segundos. ¿ Cuál es tu tarea? ¿ Será mi idea estudiantes? Yo quiero que me resuelvas dos preguntas. La primera pregunta es, quiero que cuentes cuántos nodos de elemento son. Entonces debajo de eso tú, Altaic. Esa es la primera pregunta. ¿ Cuántos nodos de elemento su crecimiento convierten eso? Esta segunda pregunta es, cuántos nodos son en total, no solo 11 notas, toma notas, comenta nodos, et cetra, et cetra. Están bajo la etiqueta UL. Por lo que consiguieron asignación deja dos preguntas muy sencillas. Yo quiero que le des una oportunidad. Yo quiero que lo pienses. Hemos aprendido mucho a través de esto. Pausar pocas secciones y tratar con niños es muy importante. Es por eso que en realidad quería sólo darte un sabor rápido. Así que coge un café, te bombean, intenta resolver esas dos preguntas. Te debería llevar cinco minutos como máximo. Y luego en la próxima conferencia, les mostraré cómo podemos hacerlo. 14. Desafío: solución: Sí, lo hicimos. Impresionante. Bueno, tenía que darle una oportunidad. Ya sabes, yo siempre digo que lo más importante en estas cosas es divertirte porque sientes que aprendes mejor si realmente disfrutas de lo que es lo que haces. Entonces si lo entendiste bien o mal, lactona ejecutada, el punto es que lo intentaste y Walden. Entonces aquí estamos. Tenemos nuestros artículos a la izquierda y tenemos nuestra consola a la derecha. Yo quiero que pasemos por la solución juntos. Pero antes de que lo hagamos, déjame quitarme sólo porque no quiero interponerme en el camino del público de la consola. Sí, tenemos, el primer paso es conseguir nuestro nuevo elemento, ¿verdad? Y es solo llamarlo lista. Podemos llamarlo como queramos. ¿ Cómo lo hacemos? Para acceder a esta URL ya que podemos acceder a nuestro documento, que es nuestro punto de partida, getElementsBytagName. Sabemos que queremos el elemento UL y sabemos que solo va a haber 1 elementos que queremos. El primer ítem en esa HtmlCollection. Boom, tenemos nuestra lista y puedo consola cerrar sesión eso solo para demostrarte que esta es de hecho nuestra lista. Vamos ahora a ocuparnos de nuestra primera pregunta. Recuerda lo que fue. La primera pregunta fue, quiero que cuente cuántos nodos de elemento están dentro de esta lista. ¿Cómo podemos hacer eso? ¿ Utilizamos la propiedad child o utilizamos la propiedad de la lista de nodos? Así es, Podemos usar la propiedad child, no puedo esperar porque devuelve una HtmlCollection de solo un tipo de nodo, un nodo de elemento. ¿ Y cuántos esperarías ver? Y esperar ver cinco, porque un cinco artículos. Entonces aquí vamos. Accedamos a nuestra lista. Y por supuesto, podemos acceder a los niños que no quiero devolver el Jordán, quiero devolver sólo la longitud, ¿verdad? Necesitábamos contar cuántos podemos hacer eso? Eso es correcto. Podemos acceder a la propiedad de longitud y ellos vamos tenemos cinco. Bien hecho, bien hecho. Te dije que no es tan difícil. Por supuesto, en la programación, hay muchas maneras de despellejar a un gato. Por lo que otro método que podemos utilizar ya que podemos acceder a nuestra lista. Y si comienzas a escribir, incluso puedes ver en nuestra consola aquí, esto está directamente fuera de la caja. Te dan un montón de cool esos métodos de ayudante. Está tratando de ayudarnos. El primero de esta lista es el recuento de elementos secundarios. Para que podamos acceder a eso. Y como su nombre lo indica, a cuenta cuántos elementos infantiles son. Y esta es otra forma de llegar a exactamente lo mismo. Como podemos ver, los registros de estos dos métodos producen el mismo resultado, pero cada uno sí usando una técnica diferente. El inmueble child es una propiedad de sólo lectura y devuelve una convicción de los elementos HTML dentro del elemento que se está consultando. Después utilizamos la propiedad length para obtener el número de artículos dentro de esta colección. Está bien. Entonces esa es la propiedad de los niños. ¿ Y el recuento de elementos hijos? Va a acceder al elemento hijo contarme que directamente es más intuitivo y directamente al grano. Entonces en mi opinión, es mucho más limpio. Entonces esa es la solución a la primera pregunta. ¿ Y la segunda pregunta? ¿Recuerdas qué fue eso? La segunda pregunta fue, ¿cuántos nodos hay dentro de la etiqueta UL? No solo notas de elemento, sino cuántos nodos en general, ya que estoy seguro que ya has adivinado que no podemos usar la propiedad de los niños, ¿verdad? Porque había dos en una HtmlCollection, necesitamos usar qué? Nodos secundarios, así es porque eso devuelve una lista de nodos. Entonces vamos a darle una oportunidad a eso. Y antes de darte la solución, en realidad déjame ir aquí a Visual Studio Code. ¿ Y cuántos artículos crees que deberían ser? Intuitivamente, ¿para cuántos nodos infantiles crees que serán? Bueno, si tomas solo el comentario y los ítems, puedes ver los cinco ítems en un comentario. Entonces los seis nodos básicos, pero la respuesta no son seis. ¿Recuerdas? También tenemos tomas notas. Tenemos una nueva línea y personajes antes del comentario. Aquí. Tenemos un poco de apagado al comentario después de cada hora que etiqueto. Entonces eso significa que esperaríamos los seis, vale, el seis básico inicial. Entonces esperaríamos 7, 8, 9, 10, 11, 12, 13. A ver qué obtenemos. Entonces si volvemos aquí a nuestra consola con acceso a nuestra lista, y ahora queremos acceder a los nodos child, nodos child, y queremos acceder a la propiedad length. Son útiles, lo tenemos. Tenemos 13. Entonces espero que esto haya tenido sentido. Espero que hayan disfrutado de esta asignación. Creo que es bastante divertido. Y también te está enseñando a usar los niños y los nodos infantiles. Y confía en mí, esto va a ser muy beneficioso para ti como desarrollador. Sigue adelante, mantente motivado, toma un café, y te veré en la próxima conferencia. 15. Siblings: último pero no menos importante, en uno nosotros para discutir rápidamente a sus hermanos. Y sabemos que los hermanos son solo elementos que comparten el mismo padre. Entonces puedes decir que los hermanos son como hermano y hermana. Todos ellos ubicados en el mismo nivel arbóreo dentro del DOM. Déjenme aclarar algo primero. Los hermanos no tienen que ser del mismo tipo. Al igual que tu hermano o hermana no es lo mismo que tú, probablemente tú completamente diferente a ellos. Es lo mismo en el árbol DOM. No tienen que ser al mismo tiempo. También sabemos que los nodos más altos que un hermano, nuestros antepasados, y los que están por debajo de él son descendientes. Estas son una especie de terminologías comunes utilizadas en la comunidad de programación. Y en caso de que te estés preguntando, ya hemos visto algunas de estas antes. Son algunos métodos que podemos utilizar para acceder a los hermanos anteriores y próximos hermanos. Echemos un vistazo a algunos de estos métodos en acción. 16. Siblings ejemplo: Entonces aquí estamos, miramos a los hermanos. Lo que quiero hacer es que quiero acceder a nuestro segundo, me llevaré el del medio y quiero simplemente cambiar ese estilo. Y sé que esto es terrible usar un estilo en línea, pero este es un ejemplo tan simple. Yo sólo quiero mantenerlo así. Y esto cambia el color de fondo a verde. Ahora es ir a nuestro navegador. Eliminemos el ejemplo anterior. Él tiene la tarea, acabamos de hacerlo. Ahora podemos, y el punto medio debe ser verde. Ese es el que acabamos de darle estilo. Eso es acceder a la consola y despejemos la consola antes de empezar a codificar, solo quiero enfatizar aquí que las propiedades y métodos de hermanos funcionan de manera muy similar a los métodos de niños que acabamos de ver. En que algunos métodos atravesarán solo nodos de elemento, mientras que otros métodos recorrerán en realidad cada tipo de nodo. Otra vez. Por lo que ya hemos pasado por esto antes, no debería venir como una sorpresa. Pero lo genial con los hermanos es que es mucho más intuitivo, solo la palabra del método en sí. Por lo que el hermano anterior y el hermano Nick o devuelven cualquier tipo de nodo, cualquier tipo de hermano. En tanto que elementos anteriores hermanos o elementos siguientes hermanos, otro lado, por supuesto, devolverá sólo esos elementos hermanos. Entonces eso se trata de más intuitivo en ese sentido. En primer lugar, quiero preguntarle, ¿cómo llegamos a este punto medio 2? ¿Cómo haríamos eso? Porque lo que estoy queriendo hacer es que estoy queriendo cambiar el color de solo el artículo 1 y el ítem 3. Novelista, ¿cómo haríamos eso? Bueno, el punto de partida más fácil en mi mente sería acceder al artículo a uno en el medio. Y entonces todo lo que tenemos que hacer es cambiar un color de fondo de los elementos anteriores, Sibley, y los siguientes elementos de plomo. Así es como estoy pensando que iría a hacer esto. Entonces el punto de partida es existir ese punto medio para aliarse, ¿cómo lo haríamos? El punto de partida debería ser acceder realmente al precio de lista desordenado porque entonces podemos empezar a acceder al almacenista. Entonces, en primer lugar, definamos una variable llamada URL. Lo que queremos hacer es querer acceder al getElementsByTagName. Ya hemos pasado por esto, te das cuenta es que sabemos que esto va a devolver una HtmlCollection, ¿no? Y sabemos que voy a toda página un documento entero sólo consiste en uno, tú Altaic. Por lo que queremos acceder al primer elemento de esta lista. Entonces aquí vamos, Aquí está nuestra U L, y si consolamos cerrar sesión eso, te lo puedo demostrar. Ahí está. Hacer sentido es intuitivo hasta ahora. Pero ahora ¿cómo accedemos al elemento medio? Bueno, si hubieras pensado que podríamos usar niños, eres un 100 por ciento correcto porque los hijos solo contienen elementos de elemento y podemos ver el ítem de tres elementos. Queremos acceder a la segunda, ¿verdad? El que está en el medio. Entonces todo lo que tenemos que hacer es definir una variable llamada valor del eje medio L sale de los niños dentro de esa etiqueta UL. Y queremos el elemento muy medio, también conocido como el segundo elemento dentro de esa colección. Entonces ahí vamos. Consola log medio. Literalmente tenemos acceso a ella ahora mismo en una variable. También. Ahora si queremos cambiar ese elemento, uno, ese color de fondo, por decir rosa, ¿cómo lo hacemos? Pues recuerda que tenemos diferentes métodos y se trata de hermanos. Tenemos hermanos anteriores, y tenemos elementos anteriores. El hermano. Si solo usamos el hermano anterior, Déjame mostrarte lo que obtenemos. Anteriores hermanos. El problema con eso es que devuelve todos los nodos y significa que realmente nos devuelven ese texto. Y en este caso, el gusto es sólo para devolver carácter con todos los racimos de espacios. Eso no es lo que queremos, es que en realidad estamos queriendo el elemento en sí. Entonces aquí una manera de hacerlo es hacer que el hermano anterior y la imitación vuelva a existir, el hermano anterior. Y luego nos va a conseguir de nuevo el artículo que necesitamos. Pero es engorroso. Por eso la API DOM nos da un enfoque más intuitivo a esto. Y ese enfoque intuitivo es acceder a la variable media. Y se le acaba de llamar a los elementos anteriores hermanos. Eso es todo lo que hay a ello. Y por supuesto podemos acceder a ella propiedad de estilo. Y podemos cambiar el color de fondo para decir rosa. Ahí vamos. Acabamos de cambiar el color de fondo del elemento 1 a rosa. ahora qué pasa con el átomo tres? Bueno, sí. Nuevamente, podemos acceder al próximo hermano puede predecir hermano, como se puede ver en la consola, va a devolver el nodo de texto. Entonces sí, podemos encadenarlo de nuevo, pero es más engorroso. El camino más fácil es acceder a nuestra variable y pretender acceder directamente al siguiente elemento en el método hermano. Podemos entonces acceder a esa propiedad de estilo, cambiar el color de fondo para decir. Por lo que hoy lo tenemos. Acabamos de utilizar Nick hermano, elemento siguiente, hermano, hermano anterior, y elementos anteriores hermanos. Espero que se vaya a hacer escenas se pueda ver que es bastante intuitivo. No es tan difícil. Entonces hemos visto padres, hemos visto hijos, hemos visto hermanos. No creo que te des cuenta de esto, pero ahora mismo en realidad te estás volviendo bastante avanzado en trabajar en el DOM. Y mucha gente no entiende qué son estos métodos. Entonces mientras entonces estoy súper, súper impresionado, lo hemos hecho mucho mejor. No estamos del todo terminados. Es mucho más ascensor en este curso. 17. Resumen: En serio, en serio, has hecho una cantidad increíble. Yo estoy súper emocionado. Acabamos de terminar la sección sobre cómo puedes atravesar el DOM. Y a veces creo que no te das cuenta de lo lejos que has llegado en realidad. Quiero decir, ahora mismo y ya sabes, si la cúpula es, ya sabes, qué se diferencia de tu código HTML. Hemos pasado por métodos de acceso. Entonces si conoces el DNI o el nombre del costo del nombre de la etiqueta, puedes acceder literariamente a ese ítem específico directamente del DOM. Pero incluso más que nosotros con sólo todo el recorrido del DOM. que significa que aunque no sepas cuál es el nombre de la clase o el DNI, podemos subir y bajar el DOM y cambiar las cosas a nuestro tiempo libre. Entonces Walden y yo pensamos como tomarlo y ya has aprendido una cantidad increíble. Hemos pasado por ejemplos prácticos, hemos pasado en teoría, incluso hemos hecho gustos para llegar. Entonces al igual que Silverstein, Walden, como seguir adelante, mantente motivado. Y ahora mismo sólo quiero dar un resumen rápido de lo que hemos aprendido. Y en la siguiente sección, todo, te va a volar la cabeza porque ahora realmente vamos a empezar no sólo a movernos en el perro y voy a dejar de manipularlo. Entonces te vas a América va a ser. Entonces de verdad, muchas gracias, Walden. Gracias. Respira, relájate y disfruta el resto de esta muy corta conferencia. Y nos vemos en el siguiente apartado. Audios. Estamos casi, casi terminamos. Esto es sólo una rápida conclusión de lo que realmente hemos aprendido en esta sección sobre atravesar el DOM. Aprendimos a acceder a los nodos. Y al hacerlo, ahora sabemos caminar el árbol DOM, como dicen en la comunidad de desarrollo. Y esto implicaba como aprender sobre el padre, aprender sobre los hijos. Y por supuesto, entre los niños, aprender cómo funcionan los hermanos, ahora deberías poder acceder con confianza a cualquier nodo en el DOM y no dar por sentado esta habilidad en realidad es importante. Como acabo de decir, todavía tenemos una tonelada de información por aprender y un largo camino por recorrer. Así que siéntate, toma un criador, disfruta, y te veré en la siguiente sección. 18. Ahora es el momento de crear elementos dinámicos: Bienvenido a esta nueva sección sobre la creación de elementos en el DOM. Por lo que es muy guay que en este momento y en realidad se puede acceder a elementos en el DOM. Se puede atravesar arriba y abajo al perro. Pero, ¿sabes qué es aún más Colón? Es crear nuevos elementos en el DOM porque mis amigos, esto es lo que hace que los sitios y aplicaciones de la semana se activen. Necesitamos crear sitios web dinámicos. Y para recordarte, sitio web estético es amable de nosotros simplemente pudriendo nuestro HTML y luego no pasa nada más. Aburrido, ¿no? Mucho más emocionante para nosotros, es crear dimensionamiento de ancho dinámico. Y esto significa que usamos lenguajes, más comúnmente JavaScript que podemos usar otros para acceder y manipular el DOM que crean nuevos elementos sobre la marcha. Por lo que esta va a ser una sección súper emocionante. Confía en mí, vamos a aprender en una mamá legible de información. Por lo que canciones ninja digitales, listas, Prepárate. Aprendamos sobre cómo crear elementos en el DOM. Estoy súper, súper emocionado. Esa es una guía. 19. Sitios estáticas de sitios dinámicos: De acuerdo, entonces, ¿qué sigue? Hemos aprendido a usar glosas. Son estas etiquetas excéntricas, cetera, para encontrar cualquier nodo en el DOM. Y otra vez, no lo tomes por sentado. Es una habilidad impresionante. Putrefacción. Ahora también podemos usar propiedades padre-hijo y hermano para atravesar arriba y abajo el amanecer. Y voy a enfatizar esto otra vez. Esto es genial. Pero, ¿sabes qué es aún más guay? Tener la capacidad de crear y modificar elementos en el DOM. Entonces dando un paso atrás, podemos decir que tenemos dos tipos de sitios web, estáticos y dinámicos. Por estática, solo quiero decir que los elementos se agregan a la página escribiendo directamente código en su archivo index.html. Cuando UNA aburrida, coja, llana Jane saca, obtienes los puntos. Sitios web estáticos, simplemente un poco más. Especialmente en el mundo en el que ahora vivimos. Lo que me lleva a sitios web dinámicos. Aquí es donde se agregan elementos con JavaScript. Oh dulce NAS, los tiempos de la SEC. Obtienes los puntos. Esto es genial. Esto es lo que queremos en nuestros sitios web. Esto es lo que en realidad, ya sabes qué, Eso ni siquiera es un 12. Eso es una necesidad. Si ahora no tienes webs dinámicas, solo vas a quedarte atrás de la curva, que es yLa primera parte de estas secciones en este curso vamos a todo sobre ella acceder al DOM. Pero no es suficiente porque acceder al DOM sólo nos lleva a mitad de camino. También necesitamos aprender a crear elementos dinámicamente en el DOM. Entonces estoy súper, súper emocionado en sección son realmente m Solo quiero contestar algunas preguntas antes de pasar a la codificación realmente. Específicamente, quiero mirar cómo podemos crear artículos y también trigo como viene el método, eso nos permite hacerlo. Echemos un vistazo a eso rápidamente. 20. ¿De dónde se procede createElement()?: La forma más común de crear un elemento es método de elemento drumroll que nos da la API DOM. La pregunta que probablemente tengas sin embargo, es, ¿ dónde encontramos este método solo saltará a la consola y echará un vistazo. Entonces aquí estamos. Acabo de abrir una página de Google Chrome allá arriba. Nada a ella. Quiero encontrar con nosotros crear método de elemento viene de. Entonces inspeccionemos nuestro documento como lo hacemos habitualmente. Deberías estar muy familiarizado con este banal. Y vamos a la consola. Despejemos la consola y empecemos a buscar con este método es, podrías pensar, Ok, cool. Empecemos por buscar dentro del documento. El problema al escribir documento así, como hemos visto antes, es que en realidad nos da la representación HTML de nuestro documento. No queremos eso. Queremos que la notación JavaScript o las representaciones tipo JSON hagan eso, como estoy seguro que recordarían. Consolamos suciedad el documento a la pantalla. Esto ahora nos da un documento en formato JSON como. ¿ Y sabes qué? Déjame deshacerme de mí mismo porque no quiero meterme en el camino aquí. Ahora lo que podemos hacer es empezar a mirar este documento. Si abrimos este documento y miramos crear elementos y miramos a los mares. Y se puede ver que no se encuentra en ninguna parte. En cuanto esto te pasó, el siguiente punto del carbón es mirar su prototipo. Entonces si nos desplazamos por la parte inferior, ve este proto, su prototipo es el documento HTML. No te preocupes, nos vamos a estar metiendo en todo esto más adelante en el curso. Por ahora, sólo estamos tratando de encontrarlo. Entonces abramos este protón. ¿ Es sí? Crear elementos. No, no, no lo es. Entonces otra vez, misma cosa que desciende hasta su prototipo, que es documento. Pero sí, es una D mayúscula Vamos a abrir esto. ¿ Y esto tiene elemento crea? ¿ Tiene esto el método create element. Cooh, eso es lo que todos estos protones y lo que es esta gran D para documentos? Vamos a saltar de nuevo a los toboganes rápidamente. Quiero discutir esto con un poco más de detalle. 21. La diferencia entre documento y documento: Acabamos de ver dónde encontrar este método de creación de elementos. Ahora bien, esta es una conferencia realmente interesante que vamos a pasar y está muy avanzada. No mucha gente sabe cómo encaja todo esto. Así que considérate uno de los pocos afortunados. Espero que lo disfruten y espero que lo aprecien. Pero es continuo. Por lo que acabamos de ver que podemos encontrar esto crea elemento en el objeto documento. Y lo clave que quiero señalar es que no es lo mismo que el pequeño d. Esto es una D mayúscula, el objeto de documento. Entonces lo que quiero hacer ahora es que quiero comparar el documento con el documento que todos usamos hacer con el pequeño d. ¿Cuál es la diferencia y por qué es el presente documento lo que miraba esto? Sabemos que teníamos que empezar consolando el documento a la pantalla. No podíamos simplemente consolarlo directamente porque eso nos da la representación HTML. Y hemos visto que el proto de este documento es el documento HTML. Todo hombre, ¿qué significa esto, este documento HTML y por qué tiene hasta el día y cómo se relaciona con el documento? Console log la función constructor de este documento. Echemos un vistazo ahora. Vamos a querer hacer ahora es quiero ver lo que esta construida que Vamos a acceder a nuestra ventana, nuestro documento con en la ventana. Y vamos a acceder a esta función constructor, constructor. Si regresamos esto, podemos ver que lo que se nos devuelve es este documento HTML construir una función. Esto es muy, muy importante. Como hemos visto, podemos concluir que el objeto documento se construye a partir del constructor de documentos HTML. Por lo que podemos decir que parte del propósito de este objeto de documento HTML es crear ese documento para nosotros. Frente de Maxine. Va a venir de alguna manera y de ahí viene. Está bien, genial. Entonces ahora tenemos nuestro documento que todos solíamos usar. Pero, ¿qué hará ese documento? Entérate que podemos simplemente registro de consola obtiene tipo de nodo. Por lo que salimos del documento de ventana sin tiempo. Y como lo descubrirás consola logs 99 es el código para el nodo de documento. Sabemos que el documento HTML construye una función crea el documento. Y también sabemos que es nodo de documento fuera de tipo. ¿ Por qué es eso relevante para nosotros? Debido a que el documento es un objeto de nodo de documento. Sabemos que hereda del nodo del documento. Y sí, es una D mayúscula no es lo mismo que r pequeño d Esta es la gran D. Y porque hereda del documento y casi se podría decir que el nodo del documento es teóricamente la raíz del documento. Pero no es realmente la raíz del documento en todos los propósitos prácticos. Porque la raíz de nuestra página web es el nodo de primer elemento en el documento, que es el elemento HTML. Déjame mostrarte esto ahora mismo. Vamos a cambiar a la consola cutie o ion. Por lo que podemos ver el tipo de en la raíz de todo nuestro sistema es este nodo de documento. Pero en toda practicidad no es realmente la raíz de nuestro documento. Debería ser el documento HTML y te mostraré por qué, Porque queremos acceder al primer elemento dentro de este nodo de documento. Entonces para hacer eso, consolar. Documentaré Archea. Y por supuesto, lo que podemos hacer es abrir este documento. Entonces podemos desplazarnos hacia abajo hasta su protón, que es el documento HTML. Después podemos desplazarnos hacia abajo hasta el documento. Y solo quiero mostrarles aquí, si miramos al niño de primer elemento, ¿qué hay ahí dentro? Ahí vamos. Ese es nuestro HTML. Este es un propósito todo práctico, la raíz de nuestro documento HTML. Entonces Rebecca, aquí es donde lo dejamos. Sabemos que la raíz de nuestra página está en todos los propósitos prácticos, el elemento HTML. Por lo que podemos decir que el elemento HTML es la raíz o el elemento de nivel superior de nuestro documento HTML. Y cuando este archivo HTML se carga en nuestro navegador, sabemos que esa función constructor inicia y se convierte en el objeto de documento. Y el capital de documentos D es el último nodo del que documentaré heredar de PS, tanto documento como los constructores de documentos HTML todos instanciados por el navegador automáticamente. Cuando se carga un documento HTML. Aquí es de donde vienen en caso de que te estés preguntando. Y típicamente el uso de estos métodos se asocia con proporcionar un documento HTML a un iframe. Pero de todos modos, eso es un poco avanzado. Pero lo que hemos aprendido en esta conferencia es increíblemente avanzado. Ahora conoces la diferencia entre el pequeño objeto d documento. Entonces en última instancia hereda de este gran nodo de documento D. Y luego en medio tienes este nodo elemento HTML y el cuello patea con un construido para negrita el documento es 100, puede parecer un poco confuso, pero confía en mí, está muy avanzado y bien hecho por llegar hasta aquí. Espero que estés aprendiendo una tonelada, pero no te detengas. Te veré en la próxima conferencia. 22. Más de createElement(): Entrémonos en la carne de crear un elemento en nuestra página. Y es decir, quiero que hablemos del método de creación de elementos. Todo lo que tenemos que hacer es llamar al elemento crear en nuestro objeto documento. Por lo que accedemos a nuestro documento usando la notación de puntos. Accedemos al método del elemento. Eso es sencillo. Y como argumento, todo lo que tenemos que pasar como el nombre de la etiqueta HTML, aka tenemos que decirle qué elemento queríamos crear. Tiene sentido. Déjame saltar rápidamente a la consola y mostrarte cómo funciona esto. Al final de esta sección, vas a ser un gran maestro creando elementos. Yo quiero que salgamos rápidamente de esas líneas que estábamos mirando. Y quiero que rápidamente solo veamos crear elemento. Quiero que veas lo fácil e intuitivo que es. Entonces aquí vamos. Tengo un Google Chrome normal. Abierta. Esto, sólo tienes que acceder a la consola. C. Aquí vamos. Tenemos Google Chrome abierto con la consola. Limitador muy sencillo acercar para que puedas ver mejor la consola. Y digamos que queremos agregar un párrafo a en DOM. Cómo hacemos eso. Bueno, definamos una nueva variable llamada nuevo para. Para crear un elemento, tenemos que acceder a nuestro objeto de documento. Esto lo sabemos. Utilizamos la notación de puntos para acceder a todas estas propiedades y métodos. Y el que queremos es crear elemento. Es muy intuitivo. Queremos crear, por supuesto es una etiqueta de párrafo. Y luego vamos, en realidad hemos creado un elemento de párrafo. Qué fácil y divertido fue en. Te puedo mostrar que lo hemos creado solo por consola cerrar sesión variable, y aquí está nuestra etiqueta de párrafo. Pero lo que podría no ser tan intuitivo es, ¿crees que esto se ha agregado al DOM? ¿ O cómo nos enteramos? Definamos una nueva variable llamada HTML ramada. Defina eso. Miramos los tres objetos más importantes de nuestro DOM, uno de los cuales es el HTML. Para conseguirlo, solo accedemos a la propiedad del elemento de documento en un documento. Así de simple. Y si consolamos logramos nuestros datos HTML, y si abrimos nuestro cuerpo, no tenemos el par de Billy. En ninguna parte se encuentra en la carne. Incluso hacer esto un poco más ancho para que puedas verlo. No hay párrafo y este es el punto de tratar de hacer y lo hemos creado. Eso es algo así sólo en tierra de nadie. Volvamos rápidamente a las diapositivas porque quiero hablar de esto con un poco más de detalle. Impresionante. Acabamos de ver lo fácil que es crear un nuevo elemento. En particular, un elemento de párrafo. Para recapitular, creamos una nueva variable llamada new para y net nuevo par de variable mantener un tono de referencia, elemento recién creado. Literalmente hemos creado un nuevo elemento de párrafo. Sí. Bueno, no tan rápido en tus caballos. Crear este elemento de párrafo es muy rápido y fácil, pero solo está flotando a la perfección en el espacio por sí mismo. El motivo de que el elemento de párrafo se pierde porque el DOM no tiene idea de que existe. Todos inclinados, ¿qué hacemos? ¿ Cómo le decimos al dominante que existe? Para que este elemento, este párrafo sea parte del DOM, necesitamos alguna manera de ponerlo. No te preocupes. Déjame cortar al ajedrez para que un elemento sea parte del DOM. Las otras dos cosas que tenemos que hacer. Entonces vamos a dar un paso atrás. Hemos creado nuestra etiqueta de párrafo que está flotando sin rumbo, y solíamos crear método de elemento para hacerlo. Las dos cosas que tenemos que hacer para adjuntarlo al DOM. Una, necesitamos encontrar un elemento que actuará como párrafo de carpetas padre. Eso es lo primero que tenemos que hacer. El segundo que tenemos que hacer es tener al elemento que queremos, en este caso el párrafo a un elemento padre. Y lo solemos hacer usando un niño de pintura que pinte método niño. ¿ Eso tiene sentido? Entonces da un paso atrás. El primer enunciado en la creación un elemento es realmente crearlo. Pero eso no es suficiente. Tenemos que definir entonces dónde queremos colocarlo en el DOM. Para poder hacer eso, tenemos que pensar algo, Vale, genial, ¿Qué queremos que sea padre? Y entonces tenemos que adjuntarlo al padre. Espero que tenga sentido, pero no te preocupes si no lo es. Porque como siempre, necesitamos ver esto en escena de acción hacia arriba. 23. Agregamos un elemento a el DOM: De acuerdo, entonces hemos visto que cuando usamos crear elemento, que tipo de flota alrededor en el espacio. Y la razón de eso es que el DOM no tiene conocimiento real de que ese elemento existe. Y también vimos que para que un elemento forme parte del DOM, las dos cosas que necesitamos hacer para recordar cuáles eran. Eso es correcto. El primero es que tuvimos que encontrar qué elemento queríamos actuar como padre. Y en segundo lugar, una vez que hemos hecho eso, utilizamos un método llamado niño doloroso para agregar ese elemento al padre. Déjame mostrarte a lo que me refiero. Entonces aquí estamos. Tengo Visual Studio Code abierto y tengo el navegador a la derecha. De verdad te animo mucho a codificar junto conmigo porque me divertí más. Se aprende más. Entonces vamos a agrietarse. Yo solo quiero crear aquí una plantilla HTML muy simple. Y sí, vamos a tener una sección de cabeza dentro de la cabeza. Vamos a tener un título. Podemos llamar a nuestro título creando elementos. Y por supuesto podemos tener una etiqueta de estilo, que no estábamos del todo hacer ahora, pero vamos a hacer en breve. Entonces esa es nuestra cabeza. Dentro de nuestro cuerpo, quiero una página muy razonable y ella sólo quiere una etiqueta H1. Y eso se puede llamar MI real. Guardamos esto y refrescamos el navegador. Podemos ver estos son H1. En lo que va tan bien. Ahora agreguemos un párrafo a esto. Bueno, ya sabes lo que en realidad, en primer lugar, vamos a darle estilo a este quickie. Enfriar. ¿ Qué tipo de estilo podemos hacer? Hagamos sólo un color de fondo simple porque el blanco es simplemente espantoso. Para que podamos cambiar el color de fondo a otro. Digamos un bonito color fresco, funky borroso, morado. Ahí vamos. Y agreguemos un poco de relleno a esto. Por lo que estos son cuerpo. Quiero que ahora le estilo a nuestra etiqueta h1 también porque realmente no puedo leer eso muy, muy claramente. Entonces cambiemos el color de nuestra etiqueta H1 para ingresar una para if, if, if, if siete. Sólo para que sea más legible, en realidad lo podemos ver ahora, vamos a aumentar el tamaño de fuente de esto. Podemos cambiar la familia de fuentes. Solo pongamos un subrayado en este sabor. Entonces, ¿cómo está ese MRL? Y ahora lo que quiero que hagamos es que agreguemos un párrafo a esta página. ¿ Qué hacemos? Bueno, usemos JavaScript para hacerlo. Por lo que voy a incluir un script en la parte inferior de esta página y necesita codificaciones de puntos y JavaScript. Añadamos nuestra etiqueta de párrafo para recordar cómo hacerlo. Bueno, en primer lugar, definamos un nuevo elemento. Y este nuevo elemento va a ser un párrafo. Bueno, nuestro punto de partida en toda una página es este objeto de documento. Salimos de una de sus propiedades y métodos y el que queremos es crear elemento. Esto lo sabemos, ya lo hemos hecho antes. Y el elemento que queremos crear es este párrafo. Y este es el paso uno. Recuerda que lo hicimos la última vez que creamos un elemento burnouts flotando en el espacio. Es todo por sí mismo. ¿ Cómo entonces adjuntamos esto ahora al DOM? Fácil, primero tenemos que encontrar a su padre y después tenemos que usar a un niño doloroso. Entonces vamos a ver cómo se ve eso. Así que llámalo paso 1. Agarremos al padre. Y digamos que sólo queremos obtener este párrafo a nuestro organismo. Entonces, por supuesto, solo definamos una variable llamada elemento corporal. Por supuesto, documentar y cómo podemos usar una plétora de métodos. Ya hemos hecho esto antes, pero quiero usar el selector de consultas. Y queremos conseguir el cuerpo. Déjame solo hacer esto un poco más grande. ¿ Cómo está? Se sienta en una línea. Ahí vamos. Entonces ese es el paso uno. El segundo paso es, vamos ahora a adjuntar nuestra etiqueta de párrafo a este órgano. Y esto es súper sencillo. Todo lo que tenemos que hacer es acceder a nuestro padre, que definimos una variable llamada elemento corporal. Y tenemos que acceder a un método sobre este elemento llamado niño dolorido. Esto es lo que estaba diciendo. Esta es la segunda parte de adjuntar un ítem al DOM. Porque ahora está diciendo, Vale, genial, en realidad queremos adjuntar este par al cuerpo. Y hemos definido nuestro emparejado en una variable llamada nuevo elemento. Si guardamos esto, literalmente lo hemos hecho. Si inspeccionamos nuestro documento, si inspeccionamos este documento y acudimos a nuestros elementos aquí, miramos dentro del órgano. Ellos son nuestro párrafo. ¿ Qué tan impresionante es esto? Por lo que literalmente hemos editado ahora nuestra etiqueta de párrafo al DOM que el, algunas cosas que quiero decir sobre este periodo de cinta porque no lo podemos ver en la pantalla velando, hemos añadido ningún gusto. Entonces, ¿cómo hacemos eso? Bueno, saltemos a la siguiente conferencia. Yo sólo quiero resumir lo que hemos hecho. Y luego quiero mostrarles cómo agregamos texto. 24. Usar textContent() para añadir texto a un elemento: Primer paso, representemos nuestro código en un árbol DOM. ¿ Cómo se ve? Bueno, aquí vamos. Ya hemos visto como antes, deberías estar muy familiarizado con ello. Empezamos nuestra ventana, eventualmente llegamos a nuestro HTML. Se divide en dos ramas, la cabeza y el cuerpo. Estos son hijos del elemento HTML, la cabeza como vimos, y él tiene un título y estilo, y nuestro cuerpo tiene una etiqueta H1. Y incluimos esa etiqueta de guión. Realmente no recordaba dentro de esa etiqueta de script que cuando escribimos nuestro JavaScript para agregar este párrafo al DOM. Por lo que ahí tienes, el árbol DOM examen. Pero, ¿qué fue lo siguiente que hicimos dentro de nuestra etiqueta de guión? ¿ Recuerdas qué fue eso? Tetrad, editamos esta etiqueta de párrafo. Déjame mostrarte cómo se ve eso. El ego. Literalmente editamos esa etiqueta de párrafo. Sí. Son los derechos de las buenas noticias. Literalmente hemos agregado algo al DOM por nuestra primera vez, tan bien hecho. Y espero que veas que es bastante intuitivo y no es tan difícil. Pero quiero que hablemos de esta etiqueta de párrafo y un poco más de detalle. Como saben, estos elementos de párrafo recién creados no son muy útiles sin ningún gusto. De hecho, no pudimos ver nada mostrado en la pantalla. Sólo tuvimos que inspeccionar al inspector de elementos para descifrar que un par de realmente fue agregado al DOM. Tercera buena noticia sin embargo, es que podemos agregar texto usando la propiedad de contenido de texto. Pero, ¿cómo toma esto el contenido correctamente funciona el aspecto de peligro y cómo lo vemos en acción? Déjame saltar rápidamente al editor de texto y te mostraré ahora. Ya me conoces, me encantan los ejemplos prácticos y acabamos decir que para agregar toma tiempo elemento del cabello de los elementos. En particular, que podemos utilizar esta propiedad llamada contenido de texto. Entonces veamos cómo funciona. Estamos en el código que literalmente lo armamos juntos. Y quiero usar esto toma propiedad de contenido. ¿ Cómo lo hacemos? Bueno, la primera línea de código aún dentro nuestro JavaScript podemos ver que hemos creado una nueva variable llamada nuevos elementos. Deck es nuestro párrafo. Entonces si accedemos a esta variable, podemos acceder a una propiedad llamada contenido de texto. Y esto es lo que quiero mostrarles. Es literalmente así de fácil y asignamos ese valor de ese contenido que queremos agregar a una página. En este caso, ¿qué queremos hacer? Bueno, quiero agregar un emparejado y digamos solo o un producto de tu imaginación. Y si guardamos eso y boom, literalmente tenemos ese párrafo en nuestro navegador. Pero ese párrafo se ve espantoso, no apenas lo ha leído. Entonces, solo subamos a nuestra etiqueta de estilos aquí, y empecemos a peinar este párrafo. El juego, en realidad podemos usar las mismas calorías perdidas en font-size. Podemos decir de 36 píxeles. También podemos cambiar la familia de fuentes solo para ser consistentes, en realidad está un poco lejos de haber hecho todo esto y ponerlo en la parte superior del cuerpo, lo que habría ayudado. Pero de todos modos, esta es solo una de muchas maneras en las que podemos hacerlo. Y vamos a hacer que este perno de peso fuente sea audaz. Hecho. ¿ Cómo se ve eso? Entonces ahí vamos. Tenemos un párrafo con editor al DOM y ahora con también editar texto estaba en un elemento de párrafo. Desesperada. Científico parece más grande aquí, consola para endulzar CS. Y ellos, vamos con una G creó nuestro nuevo párrafo que luego accedemos a esta propiedad llamada toma contenido para agregar contenido a la página y saber, ya lo sabes. Volvamos a saltar de nuevo a la conferencia. Genial, ahí vamos. Se puede ver que no fue tan difícil mientras Dan, y como estoy grito es que la combinación de crear elemento y esto toma propiedad de contenido ha creado nuestro nodo de elemento completo. Súper, súper emocionante. Pero esta pregunta me hacen mucho los estudiantes y es, ¿ no podríamos haber usado en el HTML en lugar de ese contenido de texto? Y la respuesta es sí, podrías haber usado en el HTML. Recuerda lo que sigo diciendo en este curso que hay muchas formas de desollar a un gato, pero son algunas desventajas con el uso de HTML interno. En HTML expresa su sitio dos posibles scripting entre sitios o XSS. Porque JavaScript en línea se puede agregar a un elemento. En otras palabras, toma contenido es simplemente más seguro porque quita la etiqueta HTML. Esto es bastante técnico, así que no te preocupes si no entiendes lo que el scripting de sitios cruzados es un tema de otra cosa en sí mismo. Por ahora, solo entiende que podrías haber usado en HTML. Es solo utilizar de forma segura el contenido de texto, que es lo que hemos hecho. Espero que hayas aprendido una tonelada en esta conferencia. Pero como siempre, nos queda mucho camino por recorrer Nos vemos pronto. 25. El método appendChild(): Me gustaría que discutiéramos sobre un niño adolorido y Annelida un poco más de detalle antes de seguir adelante. Como sabemos, el uso de este método adjunta su elemento a un padre. Es importante, sin embargo, siempre agrega los elementos para convertirse en el hijo perdido de ese padre en particular. En el ejemplo que acabamos de codificar juntos, vimos que nuestro elemento corporal ya encabeza el H1 y los elementos de guión como niños. Y es por eso que cuando usamos el niño dolor, voy etiqueta de párrafo se agregó de la etiqueta R script para recordar. Por lo que se podría decir que este párrafo es el menor en caso de que usted por llegar a mitad que era Editar fuera al guión. Déjame saltar rápidamente a la consola y te mostraré. Para recordarle, aquí estaba opcode. Creamos aparente raphe y luego terminamos este párrafo a nuestro elemento corporal. Entonces vamos a la consola. Inspeccionemos este documento. Ve a la pestaña Elementos, abre el cuerpo y boom, voy párrafo se agregó ya el niño perdido lo llamará el niño menor a un padre de cuerpo. Ese es el comportamiento por defecto de un niño doloroso. Entonces ahí vamos. Acabamos de ver que un niño doloroso y elemento Zao o le duele ese elemento como el niño más pequeño al padre. Animaciones de serpientes. Podrían estar pensando en este punto, hombres, ¿nunca tengo control de manera? Yo quiero poner este elemento recién creado. La buena noticia es que sí tienes control. Tenemos múltiples métodos para agregar elementos, como un niño doloroso, que hemos visto, insertar antes y reemplazar child meets. El que quiero que miremos ahora es insertar. Antes de la inserción realizar método es muy sencillo. Uno que toma dos argumentos. El primer argumento es el elemento que estás deseando insertar en tu DOM. En nuestro caso, sería la etiqueta de párrafo. El segundo argumento es una referencia al hermano, también conocido como el hijo del padre que queremos preceder. El poco confundido, no estreses la parte superior hacia el editor de texto. Y echemos un vistazo a este método de inserción antes. Ya te veo. 26. El método insertBefore() - Ejemplo: Espero que te hayas olvidado y esto es impresionante. Eso realmente, realmente lo es. Y ahora estamos viendo cómo usar inserto antes. Así que recuerda el enfoque por defecto y lo tengo en el enemigo editor de texto solo desplázate un poco hacia abajo y al acercar. Este es nuestro enfoque por defecto. Recuerda que creamos un elemento, luego encontramos a un padre y luego usamos un hijo pin. Es nuestro palo para recordar, Vamos a tocar ahora nuestra paga a este cuerpo mediante el uso de un niño dolorado. Entonces enfoque por defecto, pero no tenemos control se inclinan en camino. Queremos que se coloque ese nuevo elemento. Entonces ahora quiero que tipo de retoques este código y quiero que veamos cómo funciona insertar antes. Entonces, en otras palabras, no quiero que utilicemos un trabajo pagador. Entonces déjame quitarle eso. Y quiero decir, Sí, esta vez, usemos inserto antes para que podamos eliminar ese código. Y ahora ¿cómo funciona esto? Será el primer paso en este método es encontrar al hermano al que fuimos a preceder. Queremos encontrar el spot en el que queremos insertar una etiqueta de párrafo. Y digamos que queremos insertar nuestra etiqueta de párrafo a esta etiqueta H1 y un cáncer, va a ser antes de esta etiqueta de guión. ¿Eso tiene sentido? Actualmente, sabemos que nuestro párrafo fue agregado como niño muy, muy joven, por lo que se agregó después de la etiqueta de guión. Más, queremos que sea antes de la etiqueta de guión. Entonces el primer paso es decir aquí, encontremos al hermano. Nosotros queremos proceder. Para hacer esto, definamos una variable llamada Desigualdad, cualquier cosa que quieras. Simplemente lo voy a llamar el elemento script porque sabemos que este es el elemento que queremos insertar párrafo antes. Y por supuesto, ya conoces todos los métodos de acceso, podemos obtener el script accediendo a un selector de consultas. Y sabemos que estamos tras esa etiqueta de guión. Entonces eso es algo genial. Se pega uno de dos. Ahora tenemos la segunda declaración dentro del estado dos, y eso es usar el método Insert use the insert before. ¿ Cómo hacemos esto? Recuerda, dije que encontramos nuestro nodo padre, que está en el elemento corporal. Accedemos a su propiedad llamada inserción antes, que toma dos argumentos. El uno es el nuevo niño, que hemos definido como nuevo elemento, que es nuestra etiqueta de párrafo. El segundo argumento es el ítem que queremos proceder, en cuyo caso, sí, es el elemento script. Aquí vamos. Y si guardamos esto, ojalá si todo va bien, debería funcionar. Entonces abramos nuestros sitios web. Se puede ver nuestro párrafo todavía está aquí. Inspeccionemos el documento. Abramos este cuerpo. Y ellos como nuestro párrafo, ¿qué tan cool es eso? Espero que lo estés, y eso es tan impresionante porque ahora hemos colocado nuestro párrafo antes de que ellos etiqueta de guión. Muy, muy cool. Espero que te diviertas. 27. ¿Hay un método de insertAfter()?: Antes de seguir adelante, sólo quiero mencionar algunas cosas más sobre este método de inserción realizar. punto de partida, como siempre, es dibujar el árbol DOM. Entonces aquí vamos, Sabemos esto. Y el comportamiento por defecto es que si usamos un niño doloroso al elemento corporal, va a pintar nuestro párrafo como el menor. En otras palabras, va a pintar ese párrafo después de esa etiqueta de guión. A veces como desarrolladores queremos más control, ¿no? Y en nuestro ejemplo, queríamos insertar su párrafo antes de esa etiqueta de guión entre el 81 y el guión. ¿ Y cómo hicimos eso? Eso es correcto. Llamamos insertar antes en el elemento cuerpo dentro especificó que los nuevos elementos, decir, ese elemento párrafo debe insertarse antes de nuestros elementos de guión. Había así de simple y podría estar pensando, Vale, genial, Esa es una forma extraña porque, ¿por qué deberíamos tener que encontrar al último hermano e insertado antes? Seguramente? Seguramente deben ser un método de inserción a menudo, también. Al resultar, no es un inserto tras método. No sé por qué. Es sólo la forma en que es. Y esto significa que no hay una forma incorporada ampliamente soportada de insertar un elemento de un elemento en lugar de antes. Pero no estreses, podemos engañar al navegador combinando el método insert before con el siguiente método hermano. ¿ Qué significa esto? Bueno, sólo significa que lo que estamos haciendo es insertar un elemento antes de ese elemento extra por delante que acabamos de agregar? Eso es un poco confuso. Déjame mostrarte lo que quiero decir. Entonces tenemos un cuerpo, tenemos nuestro H1 y tenemos nuestro guión. Y supongamos que por ahora ni siquiera tenemos texto dentro de ese seto un día, literalmente acabamos de conseguir una etiqueta H1 vacía. En ese caso, nuestro elemento va a ser el uno y el próximo hermano de ese H1 va a ser ese guión, ¿verdad? Entonces todo lo que queríamos hacer entonces es que queremos insertar ese párrafo antes del próximo hermano H1. En otras palabras, antes de ese elemento de guión en el escenario todavía podría estar rascándose la cabeza. Entonces saltemos a la consola y te mostraré esto en acción. 28. Trucos de el método insertBefore(): Yo quiero que volvamos a lo básico otra vez. Entonces tengo todo el código frente a nosotros que están despojados de todo lo demás. Y de nuevo, si volvemos a nuestro navegador, solo tenemos MRL. Y es lo que tenemos. Ya no tenemos los emparejados. De acuerdo, volvamos a Visual Studio Code. Ahora. Yo quiero que demos un paso atrás y pensemos en qué es lo que queremos hacer. Tenemos nuestra H1 y tenemos nuestras etiquetas de guión, ¿verdad? ¿ Y queremos añadir este párrafo antes de la etiqueta de guión? Sí, podemos utilizar el método inserto antes. Pero a veces tu código se complica tanto. A veces se quiere realmente insertar algo apagado a algo. Y como dije, no hay inserto fuera del método, por eso quiero que solo pasemos por un ejemplo rápido, rápido. Entonces lo primero que quiero hacer es yo, una vez que quiero agarrar el cuerpo y la etiqueta H1, Es lo primero que quiero hacer. Por lo que la lista define una variable de elemento H1 como nuestra etiqueta H1. Y solo voy a estar usando los selectores de consulta. Y sabemos que ese es el 81. Y claro que puedo hacer exactamente lo mismo. Sí, Pero quería encontrar ahora el elemento corporal. Y esto por supuesto va a ser la etiqueta del cuerpo. Por lo que pasarían muy rápido. Ahora quiero que engañemos el inserto antes de la función. Ahora con el fin de engañar esto en función súper completa, quiero crear un nuevo elemento después del elemento. Y entonces tenemos aún el elemento H1. Te mostraré lo que quiero decir. Por lo que quiero definir una nueva variable llamada H1. Eso es genial al siguiente elemento. Y quiero que accedamos a nuestro elemento H1. Y quiero llamar emitida. Recuerda el siguiente elemento método hermano. Hemos pasado por esto, te das cuenta de que encuentra los siguientes hermanos elemento. Yo sólo quiero decir, sí, me vendría bien el próximo hermano. No tengo que usar elementos siguientes hermano. Yo sólo quiero ser más co-compartiendo lo que estoy haciendo. Siguiente elementos hermano literalmente agarrará el siguiente elemento. Siendo hermano esa etiqueta de guión en no va a recoger toma notas. Esa es la única razón por la que lo hice. Ahora todo lo que estoy queriendo hacer es que estoy queriendo acceder a nuestro elemento corporal. Quiero usar este inserto antes de la función. Y recuerda el inserto antes toma dos argumentos. El primer argumento es nuestro nuevo elemento que queremos poner en el DOM. Y el segundo argumento es ese hermano de referencia, en cuyo caso, sí, lo hemos definido como H1, siguiente elemento. ¿ Qué tan guay es esto? hoy vamos, literalmente lo hemos hecho y voy a disparar al navegar y te voy a mostrar que en realidad ha funcionado. Pero sólo retomar y pensar por qué es nosotros quisiéramos hacer esto. Bueno, la única razón por la que lo uso ya que a veces no siempre sabes qué es ese próximo hermano en tu código. Y por eso lo tratamos con un árbol. Agarra el elemento actual nos ponemos, en este caso es etiqueta H1. Después accedemos al siguiente método de hermanos. En nuestro caso, utilizamos elementos siguientes hermanos que podríamos haber usado Nick hermano. Y luego sólo tratamos el rendimiento de inserción que mediante el uso de esos siguientes elementos Hermano que acabamos de crear. Y entonces hertz suena pero raro, pero confía en mí, y a veces necesitarás usar este auto admitido. Con el fin de insertar un elemento donde lo desee en el DOM. Pero déjame mostrarte que en realidad ha funcionado. Antes pasamos al siguiente cuadro. A ver cómo conseguimos esto. Sólo tienes que ir al navegador. Inspeccionemos elemento. Vayamos a los elementos. Es abrir el cuerpo y ellos, lo tenemos. Nuestro párrafo se inserta antes de esa etiqueta de script. En otras palabras, eso se inserta después de la etiqueta H1. Por lo que espero que hayas aprendido mucho ARPU encontrando esto divertido e intuitivo. Y nos vemos en la próxima conferencia. 29. Cómo eliminar elementos del DOM: Has venido de manera increíble, increíble. Ahora sabes crear elementos y agregarlos al DOM. Y por supuesto, el paso final ahora es aprender a eliminar nodos del DOM. Y directamente del murciélago, solo quiero decir que tenemos algunos métodos disponibles para quitar artículos del DOM. El primero al que quiero que veamos se llama quita niño. Echemos un vistazo a cómo funciona esto. Bienvenido de nuevo a este código probado y probado. Espero que te diviertas ahora ¿quién estaría aprendiendo una tonelada? Ahora sabemos crear elementos y editar al DOM. Por supuesto, tenemos que aprender ahora a quitarlo. Y como acabo de decir, uno de los métodos disponibles para nosotros como lo que se conoce como remove child sets. Cuando quiero mirar ahora, Aquí estamos, tenemos nuestra etiqueta de párrafo recién creada. Lo primero que quiero hacer es añadir este párrafo elementos al DOM para recordar cómo hacerlo. Bueno, primero como fuente, todos los elementos del cuerpo, accedemos a nuestro documento, ese QuerySelector. Agarramos nuestro elemento corporal. Y por supuesto accedemos a nuestros elementos corporales. Y en este caso no somos demasiado rápidos sobre la forma en que colocamos esta etiqueta de párrafo. Por lo que sólo podemos acceder a este método append child. Y podemos obtener nuestros elementos. Así de simple. Si ahorramos este día vamos, tenemos un párrafo agregado al DOM. Y sé que parece contrario a intuitivo, pero ahora eliminemos este párrafo del DOM. ¿Y cómo hacemos esto? Bueno, no puede ser más fácil que lo que estoy a punto de mostrarte. Todo lo que tenemos que hacer es tener acceso a nuestro nodo de padres. En este caso, es el elemento corporal. Entonces tenemos que acceder a uno de sus métodos. Y el método al que queremos acceder a resto se llama remove child. Y el niño que queremos quitar es que rastrea elementos de párrafo recién creados. Por lo que sólo podemos quitar elemento. Y si guardo esto, mira eso, ella se fue, está fuera. Literalmente hemos quitado un elemento del DOM y para demostrártelo, déjame bajar por el navegador, escucha, habla este documento. Hagamos eso un poco más grande. Y se puede ver aquí, esta es literalmente nuestra etiqueta corporal. Si abrimos esa apatía es etiqueta de párrafo normal, literalmente la hemos eliminado del DOM, tan bien hecho. Acabas de usar tu primer método. Y te he dicho que no es tan difícil. Eso como siempre, estas más de una forma de desollar a un gato. Y quiero mencionar algunas cosas más sobre esto. 30. Usa de parentNode con remove : Como dije, solo quiero hablar un poco más sobre este método remove child. Lo principal a tener en cuenta es que tenemos que llamar a quitar hijo del padre del niño. Queremos quitar. En otras palabras, este método de niño eliminado no viajará arriba y abajo nuestro DOM para encontrar el elemento que queremos eliminar. Ahora, digamos que no tenemos acceso directo al padre de los elementos, y no queremos perder tiempo encontrándolo. ¿ Qué podemos hacer? Bueno, aún podemos eliminar ese elemento muy fácilmente mediante el uso de la propiedad del nodo padre. En otras palabras, solo usamos la propiedad del nodo padre. Y en on net property accedemos al método child eliminado. Déjame mostrarte a lo que me refiero. Está bien, Así que aquí vamos. Aquí está nuestro código. Recuerda que acabamos de hacer esto antes de usar el remove child en un elemento corporal. Eso y si no necesariamente sabemos cuál es el padre del elemento que queremos eliminar. En otras palabras, en realidad habíamos definido elemento corporal con qué? Si no sabemos qué es eso? Bueno, en esa instancia, como dije, podemos acceder al nodo padre y luego eliminar hijo en su nodo padre. ¿Cómo haríamos eso? Al final resulta que es súper simple. Agarramos nuestro elemento que queremos quitar. Y parece un poco raro empezar de esta manera. Eso es lo que hacemos dentro de acceder a su propiedad de nodo padre, que nos dará su padre. Y ese padre. Entonces decimos, ok, cool, Entonces vamos a quitar este elemento en sí. Sé que es un poco de manera rotonda, pero así es como tenemos que hacerlo usando este enfoque. Si guardo esto y refrescamos nuestro navegador, deberíamos ver ningún cambio. Recuerda si comento este código, tenemos nuestro párrafo en el navegador. Si retomo esto, si no comenté y salvamos al lector, ese literario sí quita ese párrafo forma nuestro DOM. Entonces espero que se esté volviendo más intuitivo. Hay otra cosa que sólo quiero discutir, linda. 31. El método remove(): De acuerdo, con bacterias y voy a codificar, acabamos de mirar a CG quitar niño. Algo que tengo que mencionar sin embargo, porque ni siquiera uso niño quitado tanto más. Y la razón es que ponemos una forma muy gruesa y muy nueva de quitar elementos del DOM. Y esto se nos proporciona directamente de la caja desde la API DOM. ¿ Cuál es este método? Es super simple, Es solo quitar en frío. Entonces sí, tenemos, acabamos de hacer un ejemplo. Déjame mostrarte cómo funciona la función remove. Y no se puede conseguir más intuitivo y sencillo que esto. Todo lo que tenemos que hacer es xy side y queremos quitar en este caso, bueno, déjame simplemente guardar esto. Entonces puedes vender párrafo está en el navegador. Yo quiero quitarlo ahora, todo lo que tenemos que hacer es acceder a nuestro nuevo elemento. En este elemento tenemos directamente fuera de la caja y método llamado remove. Y si guardo esto, boom, se ha ido. ¿ Qué tan fácil e intuitivo fue esto? ¿Fue? Por qué no empiezo por solo decirte cuál fue el método remove en primer lugar e incluso podemos simplemente olvidarnos del método child eliminado. Bueno, no sé tararear las dos razones principales que me faltaba discutir todos los métodos incluyendo todos los. El primero es, te da una comprensión más intuitiva en camino nosotros, cómo llegamos a donde estamos ahora. Entonces, en otras palabras, solo nos ayuda a entender mejor nuestro código. Vas a estar viniendo a través de tarjeta vieja también. Tiene estos quitarle niño y te vas a poner como qué es eso? Esa es la primera razón. El segundo motivo por el que no lo mencioné al principio es que los navegadores soportan el método remove es un método muy nuevo. Entonces eso significa que algunos de los navegadores más antiguos no lo soportarán. Entonces si estás queriendo ser extra seguro, usa el método remove child. Si quieres que sea como yo, nueva agey, como que quieres entender cómo funcionan los viejos enfoques, pero no realmente, se pegan con el método remove. Eso es lo que uso. Y confía en mí, 95 por ciento del tiempo, está absolutamente bien. Y el método remove, como acabas de ver, era mucho más intuitivo y nos permite acceder directamente al elemento y simplemente eliminar. Duele realmente, realmente simple. Pero lo importante, independientemente del método que elijas, ambos métodos nos permiten eliminar un elemento DOM, incluidos los que originalmente estaban en nuestro marcado HTML, no solo creados dinámicamente una vez que eso es importante. Otra cosa que vale la pena mencionar es que el elemento DOM que estamos quitando tiene muchos hijos y nietos. Esos también se quitarán. Por lo que es un método bastante peligroso que sólo una especie de golpear un punto que fuera antes de empezar a quitar todo y luego descubrir que literalmente todo se elimina. Entonces ahí vamos. Entonces tienes un Tokio divirtiéndose mucho. Y por cierto, si te preguntas cuáles son esas cajas, inicialmente, es Trek nosotros. Es literalmente compartir grillos navideños. Yo estoy mirando al disabler 22 tres días antes de Navidad, pero me encanta este material y eso es risa general. A lo mejor hacer algo de filmación. Yo, sigo adelante con mi curso porque cuando junté esto, sabes, y me encanta, como realmente disfruté de firmante auditivo. Espero que tu Navidad haya sido buena. Y nos vemos en la próxima conferencia. 32. Clon: elementos de clonación: Estoy súper emocionado con esta sección. Vamos de nuevo a algo que realmente, realmente impresionante. Qué, perdón, una constante porque es realmente genial. Es decir, de nuevo, voy todos los días de una estafa manejarlo. Qué bicho raro. De todos modos, trataré de despegar donde lo dejamos. Lo que estás diciendo fue que este enlace va a ser sobre clonación, sobre replicar cosas. Eso se puede empezar con un único y único del tipo. Entonces va a ser súper interesante. ¿ Y el café? Espero que tú también lo hagas. Y se une más tarde, siéntate, relájate y vamos a agrietarnos. Ver anónimo. Woo hoo. Esta sección solo sigue consiguiendo WIDA. Y cuando cuanto más nos metemos no. Pero afortunadamente, casi en la última sección a la hora de manipular el DOM, la técnica de manipulación DOM restante que necesitamos tener en cuenta es aquella que gira en torno a la clonación de elementos. Y por elementos de entrenamiento, me refiero a crear réplicas idénticas de un determinado elemento. Pero wow, ¿esto se está poniendo raro? Es casi como si estuvieras pensando que tienes una huella digital única. Y de repente definió que hay un montón de otros de manera idéntica, lo mismo. Y esa huella digital, tu huella dactilar solía ser única. Y esta es toda la idea sobre la clonación. Muy bien, la pared inclinada, cómo clonamos es bastante fácil. Utilizamos un método llamado nodo clon en el elemento que deseamos replicar o clonar. Pero agárrate a tus caballos. Hay una cosa más que tenemos que hacer. Necesitamos proporcionar a este método un argumento verdadero o falso. Y esto especifica si queremos clonar sólo el elemento, si queremos clonar el elemento y todos sus hijos. Si estás queriendo clonar un elemento así como todos sus hijos, pasamos el valor verdadero a este método. Si solo estás queriendo replicar el elemento en sí en el alto nivel, pasamos el argumento falso. Y ahora mismo podrías estar pensando, Cool, entender cómo funciona, pero ¿por qué alguna vez querríamos clonar algo? Simplemente da un paso atrás y piensa si hay algún escenario en el que esta algún tipo de repetición en tu sitio web, entonces la clonación sería beneficiosa. Por ejemplo, digamos que tienes una ShoppingList dinámica Y cada vez que un usuario agrega un artículo al ShoppingList, se agrega al carrito o se agrega a una lista. Esa etiqueta LI entera y todos los estilos y los niños que tienes en ella. Si lo haces, será increíble si solo pudieras clonarlo cada vez que el usuario haga clic en el botón Agregar, ¿verdad? Al igual que tiene sentido, En realidad es bastante intuitivo. Pero en este punto probablemente te rascaste la cabeza. No te preocupes, saltemos a la consola y empecemos a codificar. Empecemos a ver cómo funciona este método. Estoy súper, súper emocionado de verte ahora. 33. Clon: ejemplo: Está bien, es hora de un ejemplo práctico. Para que puedas ver en segundo plano tengo código y volver a Visual Studio Code. Deslízate eso hacia abajo. Yo sólo tengo un H 1.5 un párrafo. Y si les muestro cómo se ve eso si ponemos nuestra pantalla aquí, esto es todo. Simple, no es nada más en ello. Es todo lo que tengo lo que quiero hacer. Bueno, digamos que queremos replicar este párrafo. En otras palabras, como que sólo queremos esto, ¿verdad? Pero no sé, lo escribí estáticamente en el HTML. Yo quiero que esto se agregue dinámicamente, y quiero que clonemos este párrafo. ¿ Cómo lo haríamos? Bueno, de eso se trata esta conferencia. Entonces entrémonos en ello. Permítanme que suprima estos párrafos. Y aquí tenemos una codificación de inicio tardío. Lo primero que quiero hacer es añadir una clase a este párrafo. Y llamemos un mensaje de clase. Podemos llamarlo como queramos. Y ahora quiero que agreguemos nuestro JavaScript. Ahora las dos cosas que quiero hacer. En primer lugar, quiero definir dónde queremos poner el párrafo y queremos ponerlo dentro del cuerpo, no te preocupes. Queremos que sea un hijo del cuerpo. Por lo que necesito un acceso nuestro elemento corporal. El segundo que tenemos que hacer es que defina lo que queremos escalar. Y en esta instancia queremos clonar la etiqueta de párrafo. Esperanza eso tiene sentido. Por lo que el primer paso es agarrar nuestro elemento corporal así como el elemento que queremos abrazar, que es el elemento de párrafo. ¿Tiene sentido? Entonces definamos nuestro elemento corporal como variable de elemento corporal. Y podemos agarrar esto por varias maneras. Ya hemos visto como realmente en el curso deberías ser un dominado esto ya. El primero que tenemos que hacer es como siempre, acceder al elemento raíz inicial de nuestro DOM, que es este objeto de documento con nuestra red, tenemos una plétora de métodos disponibles para nosotros. El 10, 12 años ahora es el QuerySelector. Y por supuesto queremos conseguir este elemento corporal. Nosotros vamos a hacer lo mismo. Pero para el párrafo, sólo llamémoslo para elemento. Y de nuevo, iniciamos el documento. Ahora podemos usar el selector de consultas. De nuevo, quiero mezclar las cosas. Y por eso pensé que pondría una clase ahí. Y como sabemos, tiene una clase de mensaje. El día de hoy tenemos una deudas. Nuestro primer paso, lo siguiente que quiero hacer es que quiero ejecutar una función. Y esa función va a agregar esta etiqueta de párrafo dinámicamente a nuestra página web. Si no sabes qué funciones son, cómo escribir en la sintaxis demuestra, tengo un curso completo real sobre JavaScript y cómo funcionan las funciones. Si te interesa, ya sabes, dale una oportunidad. De no ser así, sin estrés. todos modos voy a escribir una cola contigo. Muy bien, así que empecemos a definir nuestra función. Definamos nuestra, y llamémoslo aplicaciones modernas decir qué función cualitativa queremos. Sí, usamos la palabra clave function en JavaScript. Entonces definimos el nombre de nuestra función, que es decir ¿qué? Dentro de las dos llaves, aquí es donde realmente tenemos la carne de nuestro código. Lo primero que quiero hacer es que quería encontrar cuál es nuestro texto clon. Definamos una variable llamada texto clonado. ¿ Y qué queremos clonar? Así es, queremos clonar nuestro párrafo. No somos para elemento era, a menos que elemento ahora podamos acceder a nuestro método de clon Node. Recuerda que en la conferencia anterior, clonaré método Node. ¿ Y recuerdas el argumento que necesitábamos para proporcionar este método? Escribamos, necesitábamos proporcionar un booleano, ya sea verdadero o falso. ¿ Qué crees que deberíamos poner aquí? Yo quiero que pienses en esto. Quiero que piensen si necesitamos poner verdadero o falso en este argumento aquí, en este clon Node. Dé un paso atrás. ¿Qué es lo que clonamos? Clonación de ese párrafo. Y el párrafo está sentado debajo de esa etiqueta H1, ¿no? ¿ Tiene el párrafo algún hijo? Es una pregunta un poco engañosa y podrías estar pensando que no tiene hijos, en cuyo caso debes poner falso. Pero eso estaría mal. Eso te mostraré en el día siguiente a y por ahora. Sí tiene hijos. En realidad tiene que toma nodo cuando era niño. Entonces tenemos que pasar en el argumento verdadero. Entonces ahí vamos. En este punto del tiempo, literalmente hemos clonado nuestro texto impresionante bit de derechos. De manera similar a cuando usamos el método create element. Recuerda cómo simplemente flota por ahí en soleado todo por sí mismo a la perfección. Todo lo mismo va a pasar aquí. Hemos creado este elemento de sabor clon, este párrafo. Entonces solo está flotando por ahí. Tenemos que adjuntarlo a un padre de familia. Y es exactamente por eso que tuvimos que crear ese elemento corporal. Necesitas desplazarte un poco hacia abajo para que puedas ver, ahí vamos. Entonces todo lo que tenemos que hacer ahora es que tenemos que acceder a nuestro elemento corporal. Tenemos noticias de hoy, el método de anexar niño donde no tenemos que justo lo que vamos a hacer aquí. Y por supuesto, el argumento o el niño que queremos anexar es nuestro texto clonado. No tiene sentido. Pero en este punto del tiempo, si solo nos detenemos aquí y vamos al navegador, no nos pasaba nada y podemos inspeccionar el documento. Y podemos abrir nuestro cuerpo. Y se puede ver que sólo tenemos un párrafo. No hay un segundo párrafo. No hemos hecho nada. En otras palabras, no hemos ejecutado disfunción. Hemos creado la función, pero no hemos ejecutado en ella. ¿ Y cómo quiero hacer eso? O podríamos simplemente ejecutar la función enfriando, digamos agua por aquí. Podemos volver a nuestro navegador, y ahí vamos. Literalmente hemos añadido un párrafo a nuestra alcalosis DOM. Pero quiero hacerlo dinámicamente y quería seguir ocurriendo cada 1 segundo. Entonces, ¿cómo haríamos eso? Volvamos aquí a nuestro código. Y quiero usar ahora un método inbuilt DOM llamado sic interval. Entonces aquí usemos un perno en la función DOM, que por cierto es del objeto de ventana. Para ejecutar nuestro decir, qué función cada 1 segundo. Y el método que quiero usar se llama intervalo de sentarse. Y solo un poco de mosca, mucha gente, y si comienzas a buscar en Google el intervalo de sentarse, piensan que es un método JavaScript. No es un método JavaScript. Viene del objeto de ventana dentro de nuestro DOM otra vez. Entonces aquí te dejamos solo un poco de información que puedes sacar en la próxima era de la fiesta. El método de intervalo Sit toma dos argumentos. El primer argumento que toma es el manejador. En otras palabras, es la función que quieres ejecutar. Nosotros queremos ejecutar el, decir qué función, ¿no? El segundo argumento es la frecuencia con la que queremos que esta función ejecute el tiempo de espera. Sí, queremos ejecutar esta función cada 100 milisegundos, decir, cada 1 segundo. Ahora si guardo esto y vamos a nuestro navegador, mira lo que va a pasar. Sí, hace que acabes de apagar esto. Déjenme refrescar. Mira lo que está pasando. Un hub que te está volando la cabeza. ¿ Qué tan guay es eso? Y si inspeccionamos elementos en nuestra página y abrimos este cuerpo es sólo refresca, emparejarlo y empezar de nuevo. Con nosotros. Mira su párrafo siendo agregado a nuestro DOM. Dinámicamente. Whoo, Eso es impresionante como hombre adulto, esperanza años Hampton emocionado como estoy literalmente manipulando el DOM sobre la marcha. Es automático, desconcierta mi mente. Creo que es impresionante. Algo que quiero mostrarles que rápidamente es si volvemos a nuestro código, si corremos la cabeza falsa como nuestro argumento aquí, ¿qué crees que pasaría? ¿ Crees que el párrafo se agregaría al DOM? Podría haber dicho que no, pero en realidad el párrafo sigue editando al DOM. Pero sin que Jordan intuye, son niños TXT. No se necesita nada, es sentido económico. Entonces si volvemos a nuestra página ahora, se puede ver que nuestra página en sí no se está actualizando porque no hay texto dentro del párrafo. Pero si inspeccionamos este documento y permítanme refrescar. Puedes ver en tu consola, en tu DOM ese párrafo se está editando cada 1 segundo. Espero que tenga sentido que en la próxima conferencia, quiero ver este código con más detalle y simplemente resumir lo que hemos hecho. 34. Analizar nuestro código de clones: Yo quiero que solo demos un paso atrás y entienda qué es lo que acabamos de hacer porque es un tema tan cool e interesante hace y nomine otros tutoriales que se encuentran en los cursos. Si un cubierto este tipo de cosas. Por lo que espero que hayas apreciado su diversión ardiente. Pero de todos modos, el secreto de lo que está pasando sí, yace en nuestro código. De hecho vamos a mejorar ocurrido. Y específicamente no necesitamos hablar la H1 y el párrafo hace una bastante sencilla. Lo que tenemos que hacer es volver a saltar a nuestra etiqueta de guión. Y necesitamos tomarnos un momento para entender lo que está pasando. En la parte superior, tenemos nuestra variable de elemento corporal. El primero que hacemos es definir nuestra variable de elemento corporal. Y eso hace referencia al elemento del cuerpo en nuestro HTML. Bastante sencillo. De igual manera, definimos nuestra variable de elemento padre y luego hace referencia nuestro elemento de párrafo con un valor de clase de mensaje no es nada demasiado especial pasando aquí, deberías estar muy familiarizado con esto. Ahora, aquí es donde las cosas se ponen interesantes y funky. Contamos con nuestra función de temporizador de intervalos establecidos que llama a la función decir qué cada 100 milisegundos, cada 1 segundo. Está dentro de esto, di qué función donde se está llevando a cabo la clonación real. Por lo que se podría decir que la parte más importante del código para nosotros es esta. ¿ Decir qué función? ¿ Cómo funciona esto? Will nuevamente, definimos una variable llamada texto clonado. Y asignamos que el valor de nuestro clonado eliminado. Con el fin de clonar un elemento. Todo lo que hicimos fue utilizar el método de clon Node en nuestro elemento de párrafo. El resultado de que hagamos esto es que ahora se crea y almacena una copia de nuestro elemento de párrafo como parte de la variable de texto clonado. El último paso es que sumemos nuestro nuevo impulso a los dormitorios para que se presente. Recuerda, sin hacer esto, solo está flotando en el nombre, está perdido. Tenemos que adjuntarlo a un padre de familia. Tiene sentido. Y por eso accedemos al elemento el padre. Después utilizamos ese método de pintura infantil, que hemos visto en conferencias anteriores. Y por supuesto añadimos el texto clonado a este elemento de cuerpo. Y gracias a nuestro intervalo establecido, todo el código bajo el say qué función se repite para seguir añadiendo son elemento clonado a la página. Y por supuesto, lo último que notaste fue que pasamos el valor verdadero o falso. Yaks, es el último ejemplo que mostramos, pero en realidad hicimos una pausa verdadera como el argumento en esta función de nodo clon. ¿ Por qué hicimos eso? Nuestro elemento de párrafo no parece tener hijos, ¿verdad? Bueno, aquí es donde entra en juego la distinción entre elementos y nodos. Nuestra etiqueta de párrafo no tiene ningún hijo o elementos que el texto dentro de la etiqueta de párrafo es en realidad un nodo hijo. Específicamente, un niño toma nodo. Y este detalle es muy importante tener en cuenta cuando estás encontrando una clonación suave algo y no esperas ver lo que hiciste. Espero que esto esté haciendo escenas. te está llegando un hub más intuitivo. Y sobre todo, espero que te estés divirtiendo. 35. Desafío de las clases finales: introducción: Pensé que sería divertido solo tener otro ejercicio para aplicar lo que has aprendido. Se puede ver aquí de fondo, tengo una página muy sencilla llamada cool animals. Y bajo eso, tengo un montón de artículos de lista. Y lo que quiero que hagas es que pienses en cómo puedes agregar dinámicamente estos ítems de lista a la página como lo he hecho. Por lo que te mostraré el código y se proporcionan en la conferencia. Se puede descargar una novela. Pero este es el punto de partida. Se puede ver justo en un CSS muy simple. Y si nos desplazamos hacia abajo, aquí es donde entra en juego el quid del ejercicio. Tengo un 81 y una etiqueta UL. Bastante sencillo. Entonces tengo guión R, tengo nuestro JavaScript, Encuentra una matriz llamada animales. Eso es lo que he hecho. Lo que quiero que hagas es que agregues todos estos ítems dentro de esa etiqueta UL dinámicamente. Con JavaScript. ¿ Se puede averiguar cómo hacerlo? Ya sabes acceder al DOM, sabes crear elementos, sabes poner esos elementos en el DOM, darle un diodo. Y en la próxima conferencia, les mostraré cómo lo hice. Realmente no es tan difícil, pero solo debe reforzar o desviar, tener sí. 36. Desafío de las clases finales: solución: ¿ Le diste una oportunidad? Eso espero. Y verás aquí lo intuitivo y fácil que es en realidad una vez que entiendes todos estos métodos, es realmente divertido. Entonces entrémonos en ello. ¿ Qué es lo primero que tenemos que hacer? Bueno, probémoslo. Tenemos que definir dónde queremos poner esta etiqueta LI en la que vamos a crear. Recuerda que ponemos apegados a ella aparente, en ese caso nuestro padre es la etiqueta alt. Entonces el primer paso es definir una URL. Vamos a llamarlo elemento UL. Y literalmente lo podemos encontrar. Podemos asignarle un valor. Sí, empezamos a documentar. Esta es la raíz de nuestra página. Accedemos a un método llamado QuerySelector y solo encontramos la etiqueta UL. Ahí, lo tenemos. Este es el primer paso. El segundo paso que tenemos que hacer es crear una etiqueta LI. Necesitamos entonces agregar tomas a esa etiqueta LI, y luego necesitamos editar a este nuevo elemento. ¿ Cómo vamos a hacer eso? Bueno, en primer lugar, tenemos una matriz llamada animales. Necesitamos tipo de bucle a través de esa matriz. Necesitamos entonces agarrar cada elemento por el que estamos buceando. Incluya eso como las tomas a la etiqueta LI y luego agregamos eso a la URL. Espero que eso tenga sentido. Déjame mostrarte cómo nuestra suciedad. Nuevamente, hay muchas formas de desollar a un gato cuando, quiero decir, podríamos usar el tradicional for-loop, quiero usar a los cuatro simplemente más intuitivos para mí. Si no sabes lo que eso significa. Nuevamente, puedes hacer mi curso de JavaScript. Simplemente puedes buscarlo en Google. Es muy simple for loop. Entonces sí, todo lo que estoy queriendo hacer es que estoy queriendo definir un for of loop. Iterador es cada elemento de la matriz. Y sólo vamos a llamar a ese animal. Podemos llamarlo como queramos de qué objeto mientras queríamos recorrer esa matriz llamada animales. Entonces ahí vamos. Cada vez que itera a través de esta matriz, nos va a arrojar de nuevo ese nombre animal en una variable llamada animal. Eso es todo lo que hace código significa y todo lo que está haciendo. Por favor, no se intimiden. Tsunami. Sepa que cada vez que recorre este array, vamos a tener ese nombre animal en una variable llamada animal cool. Eso es genial. Pero, ¿cuál es el primer paso? El primer paso es crear nuestro elemento de lista. Sólo llamémoslo elemento de lista. ¿ Cómo creamos esto? Recuerda que iniciamos nuestro documento. Accedemos a un método llamado método de creación. Crear elemento, lo siento. Y el elemento que queremos crear es este ataque aliado. Hasta ahora tan bien, ahora mismo estarías de acuerdo conmigo en que hemos creado una etiqueta aliada, pero está vacía. No hay gusto. Y en una de las conferencias anteriores, mucho, mucho antes, sí discutimos cómo agregar texto a un elemento recién creado. ¿ Recuerdas cómo hicimos eso? Escribamos accedemos a una propiedad sobre el elemento llamado contenido de texto. Podríamos usar en HTML. Pero para los ataques de scripting entre sitios, es mucho más seguro usar lleva al contenido. Entonces hagámoslo. Accedamos a nuestro elemento de lista recién creado. Entonces queremos cambiar su contenido toma, ¿no? ¿ Y a qué queremos que eso sea igual? ¿ A qué queremos asignarle eso? Donde queremos que sea el nombre del animal. Y como mencioné, tenemos esta variable llamada animal a cada iteración de bucle. Entonces ahí vamos. Literalmente ahora o lo manipulamos, toma contenido. ¿ Cuál es el último paso? El último paso es agregar esto a nuestro DOM, ¿verdad? El novato está flotando en el espacio todo por sí mismo. Tenemos que editar a algo. Sí, definimos el elemento UL como su padre. Queremos acceder al método del dolor niño, NGS. Fuimos a pintar lo que queremos anexar este ítem de lista. Por lo que ahí lo tenemos. Antes de ahorrar, si voy al navegador, puedes ver aquí acabamos de tener un encabezado llamado cool animals. Volveré al código de Visual Studio aquí y guardo. ¿ En qué crees que va a pasar? Bueno, espero que haya funcionado. Vayamos aquí a nuestro navegador. Y boom, el IGA, esto es impresionante. Literalmente tenemos lo que estábamos queriendo. Espero que sí tenga sentido. Ojalá te divirtieras con este ejercicio. Esto realmente ha puesto muchos de los diferentes conceptos que has aprendido en el curso juntos en crear algo realmente cool y divertido. Si bien eso, estoy muy, muy impresionado. 37. Outro de clase: Altavoz de que tienes un vendedor, ¿verdad? Literalmente acaba de terminar una clase masiva. Hablar de manipular la forma dominante, moverse con agregarle elementos HTML dinámicos. Vamos, esto tiene que ser emocionante Walden en serio, has aprendido sobre los nodos. Aprendiste que en la industria del desarrollo miramos como a los nodos como una relación de padre, hijo, hermano. Y una vez que captas eso, realmente no es tan difícil, es bastante intuitivo atravesar el DOM Walden en serio, acariciarte en la espalda y no des por sentado cuánto has aprendido hasta ahora. Pero para mí siempre es un murciélago, no está ahí. No estamos del todo terminados. Porque en las próximas clases, hecho, en la próxima pérdida, ahora vamos a estar hablando de un concepto crucial en el DOM y eso son los eventos. Porque muchas veces no solo quieres crear algo estáticamente. Se quiere reaccionar a ciertos eventos cuando un usuario hace clic en un botón o en una vena, quieres hacer algo cuando usas un scroll con el mouse, cuando un usuario ejecuta un evento key up, sólo entonces a menudo quieres hacer algo. Entonces con eso dicho, tomemos un descanso, tomemos un café. Y en la siguiente conferencia, Empecemos a hablar de las venas dormi se llaman blancas.