Chuck's Academy

Manipulación de DOM en JavaScript

Navegación en el DOM

La navegación en el DOM es esencial para acceder a elementos específicos y manipular su contenido, estilos o propiedades. El DOM es una estructura jerárquica de nodos, y JavaScript nos proporciona varias propiedades y métodos para recorrer esta estructura y localizar elementos.

Propiedades de Navegación

A continuación, algunas de las propiedades de navegación más comunes disponibles en los nodos del DOM:

parentNode

Accede al nodo padre del elemento actual.

javascript

childNodes y children

childNodes devuelve una colección de todos los nodos hijos, incluyendo texto, comentarios y elementos. children devuelve sólo los elementos hijos.

javascript

firstChild y firstElementChild

firstChild devuelve el primer nodo hijo, mientras que firstElementChild devuelve el primer elemento hijo.

javascript

lastChild y lastElementChild

Similar a firstChild, pero devuelve el último nodo hijo o el último elemento hijo.

javascript

nextSibling y nextElementSibling

nextSibling devuelve el siguiente nodo en el mismo nivel, mientras que nextElementSibling devuelve el siguiente elemento.

javascript

previousSibling y previousElementSibling

Similar a nextSibling, pero devuelven el nodo o elemento anterior.

javascript

Ejemplo de Navegación en el DOM

A continuación, un ejemplo que demuestra cómo navegar por los distintos niveles del DOM:

html

[Placeholder: Imagen que muestra un diagrama del DOM con los elementos parentElement, firstChild, secondChild y thirdChild, y cómo se navega entre ellos.]

Navegación con Selectores de Consultas

Además de las propiedades de navegación, podemos utilizar querySelector y querySelectorAll para seleccionar nodos en base a selectores CSS.

javascript

Uso de closest

El método closest permite encontrar el ancestro más cercano que coincide con un selector determinado.

javascript

Ejemplo Completo de Navegación

En este ejemplo completo, combinaremos distintas técnicas de navegación para manipular elementos en un árbol DOM más complejo:

html

Conclusión

La navegación en el DOM es una habilidad fundamental para cualquier desarrollador web. Al dominar las diversas propiedades y métodos de navegación, podemos acceder y manipular cualquier parte del documento de manera eficiente. En el siguiente capítulo, profundizaremos en animaciones y transiciones en el DOM para mejorar la experiencia del usuario.


Pregúntame lo que sea