Navegación efectiva entre nodos

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 16

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

hace 2 meses

```js /* La navegación entre nodos recibe el nombre de traversing DOM, y consiste en recorrer los nodos basandonos en la jerárquia de padre, hijos, hermanos. */ //* Navegación del elemento padre a hijo const menu = document.querySelector('.menu') console.log(menu.children) /* children → nos retorna un HTMLCollection con los nodos hijos del nodo padre. */ //? Acceder al primer nodo → firstElementChild console.log(menu.firstElementChild.innerHTML) //? Acceder a un node específico → [] console.log(menu.children[1].innerHTML); //? Acceder al último elemento → lastElementChild console.log(menu.lastElementChild.innerHTML); //* Navegación de un nodo hijo a padre const link = document.querySelector('.link') /*parentElement → nos retorna su nodo padre */ console.log(link.parentElement) // Para conocer el abuelo de ese nodo podemos usar nuevamente parentElement y asi sucesivamente . console.log(link.parentElement.parentElement) //* Navegación entre nodos hermanos /* previousSiblind → Hermano anterior nextSibling → Hermano siguiente */ console.log(link) console.log(link.previousElementSibling.textContent) console.log(link.nextElementSibling.textContent) ```![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/519099cb-ab4b-4ace-83bd-688d8f9ee34e/b08c5ecb-a8f5-45e2-966d-970640b5d4ab/Untitled.png)

Victor R Vele

hace 2 meses

Si por alguna razonn no te sale ahi te comparto. ```js document.addEventListener('DOMContentLoaded', () => { const parent = document.getElementById("parent"); console.log(parent); const parentChildren = parent.children; console.log(parentChildren); const secondChild = parent.children[1]; // Cambiado a `children[1]` ya que `secondElementChild` no es válido console.log(secondChild); const lastChild = parent.lastElementChild; console.log(lastChild); const previousSibling = parent.previousElementSibling; console.log(previousSibling); const nextSibling = parent.nextElementSibling; console.log(nextSibling); }); ```

Jose Luis Bedoya

hace 2 meses

desde un entorno productivo, este tipo de selectores no son muy recomendados, ya que si modificas el html, terminarías seleccionando nodos que no necesitas! just getElementById is enough for almost every posible destiny

Cristian Contreras

hace 2 meses

¿Cuál es la diferencia entre traer un nodo y traer un elemento?

Santiago Ezequiel Alfonso

hace un mes

Esto es valido para llamar a un hijo?? ` const parents = document.getElementById("parents");` `const children = parents.children;` `console.log(children);` `const firstChild = children[0];` `console.log(firstChild);`

Calvin Rafael Bobadilla Fernandez

hace 10 días

![](https://static.platzi.com/media/user_upload/image-e70bbabf-b490-41c5-b384-87d0a1a5ff9d.jpg)

Alejandro Zapata

hace 3 días

¿Cómo puedo comentar en VSC varias líneas de código a la vez? Como se hace en el minuto 12:30 en el video.

Yuliani Paoleth Alcántara Galindo

hace 2 meses

**Para quienes se quedaron con las ganas de saber como acceder al segundo hijo.** Seria algo cómo esto: document.getElementById("parent").children\[1]; //\[1] dado que en cualquier array el segundo elemento está en la posición \[1] <u>Senshito papá :D</u>

Daniel Andres Rojas Paredes

hace 2 meses

hola, no me funciona mi codigo, no entiendo porque el child de article es undefine, ya intente con diferentes metodos, byClass,ById ByTagName. no hubo cambio. este es mi codigo```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dom manipulation notes</title> <script> const papaito= document.getElementsByClassName("article"); console.log(papaito) console.log("estos son los hijos",papaito.children) </script> </head> <body> <main>

Consulting DOM elements

There are 2 main categories of methods to make requests to the Document

getElementby_("idNameOrWherever"): Id, ClassName, TagName...
querySelector_(".selectorOrselector"):All

The first one gives us an HtmlColection where the changes applied are seen in real time and is better for performance The second one gives us a node list whe the changes can't be seen in real time.

Surfing the DOM with code.

For this is usefull to think about the DOM as a family tree, then to fix on an element that we can call parent, an then acces to the atributes: <menu>

.children

.firstElementChild

.PreviusElementSibiling

and much more following the same pattern more or less </menu>

You can also use the query method that we talk about earlier to fix a child and move from it using the next

.parent

.closest("grandparent")

</article> </main> </body> </html> ```

Julio Cardenas

hace 2 meses

Traer el segundo hijo: ``` //traer los hijosconst children = parent.childrenconsole.log(children) //primer hijolet firstChild = parent.firstElementChildconsole.log(firstChild) const lastChild = parent.lastElementChild;console.log(lastChild); //segundo hijoconsole.log(children\[1]); ```

Matias Ezequiel Rivero

hace 2 meses

![](https://static.platzi.com/media/user_upload/imagen-fe475919-f86c-4ef4-bda1-ac0a8f8656b1.jpg)![](https://static.platzi.com/media/user_upload/imagen-eb6f8537-27d2-4e31-9c27-99fa41677df0.jpg)

Matias Ezequiel Rivero

hace 2 meses

De los métodos vistos en clase sobre la navegación desde hijos a elementos padres o hermanos hay otro que es: parentNode -> Devuelve el nodo padre del elemento actual ej. element.parentNode

Daniel Andres Rojas Paredes

hace 2 meses

hola, me encontre este comportamiento muy curioso del codigo y quisiera que alguien me explicara el porque o si mi hipotesis es valida. Hipotesis: como tengo la etiqueta script dentro del head, y el codigo js dentro de ella directamente,(no en un archivo aparte) al correr el js aun no existe ningun id parent.por eso la variable queda null. codigo: ```js const papaito= document.getElementById("parent") console.log(papaito) const children =papaito.children ``` Comportamiento observado: si corro ese mismo codigo dentro de la consola del inspector la variable papaito no queda en null, trae el elemento de id parent, que tambien es un menu, pero si es en la etiqueta script dentro del head la variable papaito queda en null

Natalia Gallego Heras

hace 2 meses

Por si a alguien le ayuda visualmente con el traversing DOM:![](https://static.platzi.com/media/user_upload/traversingDOM-4dd4ec25-67a8-40aa-817e-f7e99a79bd3c-75e509ad-7867-4a5a-a3bd-115780455254.jpg)

Facundo Peralta

hace 3 meses

Una manera de explicar muy buena!

Tony Alvaro Pariona Romero

hace 14 horas