Navegar en el DOM - lizethcas/javascript-universe GitHub Wiki

Navegar en DOM

DOM proporciona una amplia gama de opciones para manipular un elemento y su contenido, pero para hacerlo, primero debe ser referenciado. El acceso a DOM comienza con el objeto document, desde el que se puede acceder a todos los elementos.

ℹ️ Es interesante:

document es parte del objeto global window el cual está disponible en el script, cuando se ejecute en el navegador. Al igual que alert, console.log, prompt y muchos otros más.

  • El elemento superior se llama raíz (root node).

  • Cada elemento, excepto la raíz, sólo tiene un padre.

  • Un artículo puede tener tantos hijos como quiera.

  • Los hermanos son elementos con un padre común.

  • Los hijos son elementos que se encuentran inmediatamente dentro del nodo actual (primera anidación).

  • Los descendientes son todos los elementos que se encuentran dentro del actual, junto con sus hijos, los hijos de sus hijos y así sucesivamente. Es decir, todo el subárbol.

    Descripción

Para navegar por esta jerarquía, los elementos tienen que tener las siguientes propiedades

Javascript:

elem.parentNode               // padre
elem.childNodes               // todos los hijos (incluye texto)
elem.children                 // solo hijos tipo elemento
elem.firstChild               // primer hijo (incluye texto)
elem.firstElementChild        // primer hijo tipo elemento
elem.lastChild                // último hijo (incluye texto)
elem.lastElementChild         // último hijo tipo elemento
elem.previousSibling          // hermano anterior (incluye texto)
elem.previousElementSibling   // hermano anterior tipo elemento
elem.nextSibling              // hermano siguiente (incluye texto)
elem.nextElementSibling       // hermano siguiente tipo elemento

// Acceso a elementos de formularios
form.elements                 // colección de todos los elementos del formulario
form.elements.name            // acceso directo a un elemento por su atributo name
form.elements[name]           // acceso dinámico a un elemento por su name

Ejemplo:

HTML:

<ul class="list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

Javascript:

console.log(document); // Imprime el objeto completo del documento HTML (DOM), que representa toda la página.

const body =document.body;
console.log(document.body); // Imprime el elemento <body> del documento, tiene todo el contenido visible de la pagina

const list = document.querySelector(".list");
console.log(list); // Imprime el primer elemento que tenga la clase "list"

const firstListItem = list.firstElementChild;
console.log(firstListItem); // Imprime el primer hijo del <ul>, es decir, el primer <li> ("First item").

const lastListItem = list.lastElementChild;
console.log(lastListItem); // Imprime el último hijo del <ul>, es decir, el último <li> ("Fifth item").

const listItems = list.children;
console.log(listItems); // Imprime una colección de todos los elementos hijos del <ul>, que son los <li> ("First item", "Second item", etc.).

ℹ️ Es interesante:

Las colecciones DOM como childNodes y children son pseudo-arrays (NodeList), no tienen la mayoría de los métodos array.

Siguiente: Iterar elementos

⚠️ **GitHub.com Fallback** ⚠️