Navegar en el DOM - lizethcas/javascript-universe GitHub Wiki
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.
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 nameHTML:
<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
