Comprender el DOM es esencial en su carrera de desarrollo web. Debe saber cómo seleccionar diferentes elementos en el DOM, para luego poder leer su contenido o modificarlo.

El recorrido DOM describe cómo navegar por la estructura en forma de árbol que generan los documentos HTML. Aquí hay una guía completa sobre cómo atravesar el DOM con JavaScript.

¿Qué es atravesar DOM?

El Modelo de objeto de documento, o DOM para abreviar, es una representación en forma de árbol de un documento HTML. Proporciona un API que le permite a usted, como desarrollador web, interactuar con un sitio web utilizando JavaScript.

Cada elemento del DOM se conoce como nodo. Solo a través del DOM puede manipular la estructura, el contenido y el estilo de su documento HTML.

El recorrido DOM (también llamado caminar o navegar por el DOM) es el acto de seleccionar nodos en el árbol DOM de otros nodos. Probablemente ya esté familiarizado con varios métodos para acceder a elementos en el árbol DOM por su id, clase o nombre de etiqueta. Puedes usar métodos como

instagram viewer
documento.querySelector() y documento.getElementById() para hacerlo

Hay otros métodos que puede usar en conjunto para navegar el DOM de manera más eficiente y robusta. Como puedes imaginar, es mejor buscar desde un punto ya conocido en un mapa que hacer una búsqueda completa.

Por ejemplo, seleccionar un elemento secundario de su padre es más fácil y eficiente que buscarlo en todo el árbol.

Un documento de muestra para recorrer

Una vez que tenga acceso a un nodo determinado en el árbol DOM, puede acceder a sus nodos relacionados de diferentes maneras. Puede moverse hacia abajo, hacia arriba o hacia los lados en el árbol DOM desde su nodo seleccionado.

El primer método consiste en buscar un elemento que comience con un nodo superior (como el nodo del documento) y se mueva hacia abajo.

La segunda forma es la opuesta: te mueves desde un elemento interior hacia arriba en el árbol, buscando un elemento exterior. El último método es cuando busca un elemento de otro elemento en el mismo nivel (lo que significa que los dos elementos son hermanos) en el árbol del documento.

Para demostrarlo, considere este documento HTML de ejemplo:

<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="UTF-8" />
<meta http-equiv="Compatible con X-UA" contenido="IE = borde" />
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1.0" />
<título>Página de Ejemplo</title>
</head>
<cuerpo>
<principal>
<h1>Título de mi página</h1>
<pag>Buen título va aquí</pag>


<clase de articulo="primer artículo">
<h2>Lista de frutas increíbles</h2>
<pag>debe comer frutas</pag>


<clase div="envoltorio-1">
<ul clase ="lista de manzanas">
<li clase ="manzana">manzanas</li>
<li clase ="naranja">naranjas</li>
<li clase ="palta">Aguacates</li>
<li clase ="uva">
 Uvas


<ul>
<li clase ="tipo 1">Gotas de luna</li>
<li>Sultana</li>
<li>Concordia</li>
<li>carmesí sin semillas</li>
</ul>
</li>
<li clase ="banana">plátanos</li>
</ul>


<clase de botón ="btn-1">Leer lista completa</button>
</div>
</article>


<clase de articulo="segundo_artículo">
<h2>Lugares increíbles en Kenia</h2>
<pag>Debes visitar lugares en Kenia</pag>


<clase div="envoltorio-2">
<ul clase ="lista de lugares">
<li>Masai Mara</li>
<li>Playa Diani</li>
<li>Playa Watamu</li>
<li>parque nacional de amboseli</li>
<li>Lago Nakuru</li>
</ul>


<clase de botón ="btn-2">Leer lista completa</button>
</div>
</article>
</main>
</body>
</html>

Atravesando el DOM hacia abajo

Puede atravesar el DOM hacia abajo usando uno de dos métodos. El primero es el método selector común (elemento.querySelector o elemento.querySelectorAll). En segundo lugar, puede utilizar el niños o childNodes propiedad. También hay otras dos propiedades especiales, a saber, último niño y primer hijo.

Uso de métodos de selección

Los métodos querySelector() le permiten buscar uno o más elementos que coincidan con un selector dado. Por ejemplo, puede buscar el primer elemento con una clase de "primer artículo" usando documento.querySelector('.primer-artículo'). Y para traer todo h2 elementos en el documento, puede utilizar el querySelectorAll método: documento.querySelectorAll('h2'). El querySelectorAll método devuelve una lista de nodos de elementos coincidentes; puede seleccionar cada elemento usando la notación de paréntesis:

constante encabezados = documento.querySelectorAll('h2');
constante primerEncabezado = encabezados[0]; // seleccionando el primer elemento h2
constante segundoEncabezado = encabezados[1]; // seleccionando el segundo elemento h2

El problema principal al usar métodos de selector es que debe usar los símbolos apropiados, cuando corresponda, antes del selector como lo hace en CSS. Por ejemplo, ".classname" para clases y "#id" para identificadores.

Recuerde que el resultado será un elemento HTML, no solo el contenido interno del elemento seleccionado. Para acceder al contenido puede utilizar el nodo HTML interno propiedad:

documento.querySelector('.naranja').innerHTML

Usando las propiedades de childNodes o childNodes

El niños La propiedad selecciona todos los elementos secundarios que están directamente debajo de un elemento dado. He aquí un ejemplo de la niños propiedad en acción:

constante listamanzanas = documento.querySelector('.lista-manzana');
constante manzanas = listamanzanas.niños; 
consola.log (manzanas);

Inicio sesión manzanas a la consola mostrará un conjunto de todos los elementos de la lista directamente debajo del elemento con una clase "lista de manzanas" como una colección HTML. Una colección HTML es un objeto similar a una matriz, por lo que puede usar la notación de corchetes para seleccionar elementos, como con querySelectorAll.

A diferencia del niños propiedad, childNodes devuelve todos los nodos secundarios directos (no solo los elementos secundarios). Si solo está interesado en elementos secundarios, digamos solo elementos de lista, use el niños propiedad.

Uso de las propiedades especiales lastChild y firstChild

Estos dos métodos no son tan robustos como los dos primeros. Como sus nombres lo sugieren, los último niño y primer hijo Las propiedades devuelven el último y el primer nodo secundario de un elemento.

constante listamanzanas = documento.querySelector('.lista-manzana');
constante primerNiño = listamanzanas.primerNiño;
constante ultimoniño = appleList.ultimoniño;

Atravesando el DOM hacia arriba

Puede navegar hacia arriba en el DOM usando el padreElemento (o padreNodo) y más cercano propiedades.

Usando parentElement o parentNode

Ambos padreElemento o padreNodo Las propiedades le permiten seleccionar el nodo principal del elemento seleccionado un nivel más arriba. La diferencia crítica es que padreElemento solo elige el nodo principal que es un elemento. Por otro lado, padreNodo puede seleccionar un padre independientemente de si es un elemento o un tipo de nodo diferente.

En el ejemplo de código a continuación, usamos padreElemento para seleccionar el div con la clase "wrapper-1" de "apple-list":

constante listamanzanas = documento.querySelector('.lista-manzana');
constante parentDiv = appleList.parentElement; 
consola.log (div padre); // muestra el elemento div con clase wrapper-1

Usando la propiedad más cercana

El más cercano La propiedad selecciona el primer elemento principal que coincide con un selector especificado. Le permite seleccionar varios niveles en lugar de uno. Por ejemplo, si ya tenemos seleccionado el botón con la clase "btn-1", podemos seleccionar el principal elemento usando el más cercano propiedad de la siguiente manera:

constante btn1 = documento.querySelector('.btn-1');
const mainEl = btn1.closest('principal');
consola.log (mainEl); // muestra el elemento principal

Como selector de consultas y querySelectorAll, use los selectores apropiados en el más cercano método.

Atravesando el DOM de lado

Hay dos métodos disponibles para mover el DOM de lado. Puedes usar siguienteElementoSibling o anteriorElementoSibling. Usar siguienteElementoSibling para seleccionar el siguiente elemento hermano y anteriorElementoSibling para seleccionar el hermano anterior.

constante naranja = documento.querySelector('.naranja');
constante manzana = naranja.elementoanteriorSibling;
constante aguacate = naranja.nextElementSibling;

También hay equivalentes proximo hermano y anteriorhermano propiedades que también seleccionan de todos los tipos de nodos, no solo elementos.

Haga más mediante el encadenamiento de métodos y propiedades transversales del DOM

Todos los métodos y propiedades anteriores pueden permitirle seleccionar cualquier nodo en el DOM. Sin embargo, en algunos casos, es posible que desee moverse primero hacia arriba y luego hacia abajo o hacia los lados. En ese caso, encadenar diferentes propiedades resultará útil.