Esto va de navegar por los diferentes nodos sea desde un nodo hacia abajo (hijos) o hacia arriba (padres). Existen varios métodos para ello. Ya vamos viendo que todo esto va de métodos.
.childNodos
Selecciona los elemento hijos que están por debajo de un nodo, pero también toma en cuenta los saltos de línea.
.children
Selecciona los elementos que están por debajo de un nodo pero este no toma en cuenta los saltos de línea. Es el recomendado para hacer traversing hacia los nodos hijos.
Estos métodos nos van a listar a modo de arreglos, pero se les llama HTMLCollection, pero accedemos a cada uno de la lista a modo parecido a como en un arreglo.
Todo en JavaScript esta conectado en el document, la forma en que te moverás entre diferentes elementos se le conoce como Traversing the DOM, ir recorriéndolo.
const navegacion = document.querySelector('.navegacion');
console.log(navegacion.childNodes);
console.log(navegacion.children[0]);
Básicamente el método .children y las posiciones .children[x] son lo que me va permitir hacer treversing en el DOM hacia los hijos.
Algo sobre los nodos
Los nodos a su vez son de diferentes tipos o por lo menos tienen dos clasificaciones: nodeName y nodeType. El nodeName hace referencia a la etiqueta. El nodeType hace referencia a otra clasificación que podemos detallar en esta tabla de Mozilla Developer.
const navegacion = document.querySelector('.navegacion');
console.log(navegacion);
console.log(navegacion.children[0].nodeType);
console.log(navegacion.children[0].nodeName);
Traversing cada vez más específico
En JavaScript puedes seleccionar un elemento y navegar en sus diferentes elementos... por ejemplo el card.
const card = document.querySelector('.card');
console.log(card.children);
console.log(card.children[1]);
console.log(card.children[1].children[1]); //anidar más propiedades.
console.log(card.children[1].children[1].textContent); // Acceder al título
card.children[1].children[1].textContent = 'Cambiando el Texto con traversing...' // Modificar ese título
console.log(card.children[1].children[1].textContent); // Nuevo título
Con el ejemplo anterior vemos como pudimos cambiar un texto haciendo traversing hasta llegar al elemento que queremos modificar.
Primeros y últimos elementos
Con el método children e indicando suposición podemos acceder los diferentes hijos de una lista, pero si lo que queremos es acceder al primero o al último entonces podemos usar los métodos.
.firstChild o firstElementChild
Para el primer elemento, aunque preferiblemente .firstElementChild por el tema de que ignora espacios vacíos y tal.
.lastChild o .lastElementChild
Para el último elemento, aunque preferiblemente .lastElementChild por el tema de que ignora espacios vacíos y tal.
Ir de nodos a sus elementos padres
.parentNode o .parentElement
Aquí el que no toma en cuenta los espacios es el .parentElement por lo que es el preferido por el instructor.
En algunos casos ambos van a dar el mismo resultado, en otros recuerda el espacio es importante.
const enlace = document.querySelector('a');
console.log(enlace);
console.log(enlace.parentNode)
console.log(enlace.parentElement)
// También puedes ir al padre del padre...
console.log(enlace.parentElement.parentElement)
Ir de nodos a sus hermanos
.nextElementSibling y .previousElementSibling
No hace falta mucha explicación.
En JavaScript también es posible hacer traversing a elementos que están en el mismo nivel, digamos el vecino aunque en JavaScript se les conoce como hermanos. También hay una forma de ir digamos en la otra dirección. Antes el siguiente hermano, ahora el hermano previo.
const enlace = document.querySelector('a');
const card = document.querySelector('.card');
console.log(enlace);
console.log(enlace.nextElementSibling);
console.log(enlace.nextElementSibling.nextElementSibling);
console.log(card.nextElementSibling);
const ultimoCard = document.querySelector('.card:nth-child(4)');
console.log(ultimoCard)
console.log(ultimoCard.previousElementSibling);
Si hago múltiples nextElementSibling no voy a ir al hijo del hijo, si no que voy a ir al siguiente hijo y así sucesivamente hasta que no halla más hijos.