Obtener los Elementos Hermanos en JavaScript

En el DOM, los elementos están organizados en una estructura jerárquica, donde cada nodo puede tener padres, hijos y hermanos. Los elementos hermanos son aquellos que comparten el mismo nodo padre, lo que significa que están en el mismo nivel dentro de la jerarquía del documento.

Muchas veces necesitamos acceder a los elementos adyacentes de un nodo para aplicar estilos, modificar contenido o realizar acciones dinámicas en la interfaz. JavaScript nos permite navegar entre estos elementos usando propiedades específicas. En este artículo aprenderemos a usar nextSibling, nextElementSibling, previousSibling y previousElementSibling para recorrer elementos hermanos de manera eficiente.

¿Qué es un Elemento Hermano en el DOM?

Un elemento hermano es cualquier nodo que comparte el mismo nodo padre con otro elemento. En términos sencillos, si dos elementos están dentro del mismo contenedor HTML, son hermanos entre sí.

Por ejemplo, en el siguiente código HTML, los tres <li> son hermanos porque están dentro del mismo <ul>:

<ul id="lista">
  <li id="item1">Elemento 1</li>
  <li id="item2">Elemento 2</li>
  <li id="item3">Elemento 3</li>
</ul>

Desde JavaScript, podemos seleccionar el hermano siguiente o el anterior de cualquier elemento dentro de la lista.

¿Por qué es útil conocer los elementos hermanos?

• Nos permite recorrer listas de elementos sin necesidad de clases o IDs.
• Podemos aplicar estilos a elementos cercanos a un nodo seleccionado.
• Es útil en menús dinámicos, listas de productos, formularios, etc.

Métodos para Obtener los Elementos Hermanos

JavaScript nos proporciona cuatro propiedades principales para navegar entre los elementos hermanos en el DOM. La diferencia clave entre ellas es si incluyen nodos de texto y comentarios o si solo devuelven elementos HTML.

1. Obtener el Hermano Siguiente: nextSibling

La propiedad nextSibling devuelve el siguiente nodo hermano, que puede ser: Un elemento HTML, un nodo de texto (si hay saltos de línea o espacios en blanco) o un comentario HTML.

<ul id="lista">
  <li id="item1">Elemento 1</li>
  <li id="item2">Elemento 2</li>
  <li id="item3">Elemento 3</li>
</ul>

<script>
   const item2 = document.getElementById("item2");
   console.log(item2.nextSibling); // Puede devolver un nodo de texto si hay espacios o saltos de línea
</script>

Problema: nextSibling puede devolver nodos de texto si hay espacios entre los elementos en el HTML.

Ejemplo de salida si hay espacios en blanco en el código:

#text
<li id="item3">Elemento 3</li>

Esto sucede porque los saltos de línea y los espacios en el HTML también cuentan como nodos en el DOM.

2. Obtener el Siguiente Elemento Hermano: nextElementSibling

Si queremos evitar nodos de texto y obtener únicamente elementos HTML, usamos nextElementSibling.

<ul id="lista">
  <li id="item1">Elemento 1</li>
  <li id="item2">Elemento 2</li>
  <li id="item3">Elemento 3</li>
</ul>

<script>
   const item2 = document.getElementById("item2");
   console.log(item2.nextElementSibling); // Devuelve <li id="item3">
</script>

💡 ¿Cuándo usarlo?: Cuando necesitas seleccionar el siguiente elemento visible en el DOM sin preocuparte por nodos de texto ocultos. Por ejemplo, en menús dinámicos, carruseles o sliders donde es necesario moverse entre elementos adyacentes.

3. Obtener el Hermano Anterior: previousSibling

Al igual que nextSibling, la propiedad previousSibling devuelve el nodo anterior, que podría ser un espacio en blanco, un comentario o un elemento HTML.

<ul id="lista">
  <li id="item1">Elemento 1</li>
  <li id="item2">Elemento 2</li>
  <li id="item3">Elemento 3</li>
</ul>

<script>
   const item2 = document.getElementById("item2");
   console.log(item2.previousSibling); // Puede devolver un nodo de texto si hay espacios en el HTML
</script>

Problema: Puede devolver un nodo de texto en lugar del elemento que esperamos.

4. Obtener el Elemento Hermano Anterior: previousElementSibling

Para seleccionar únicamente el elemento HTML anterior, sin contar nodos de texto o comentarios, usamos la propiedad previousElementSibling.

<ul id="lista">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<script>
   const lista = document.getElementById("lista");
   console.log(item2.previousElementSibling); // Devuelve <li id="item1">
</script>

💡¿Cuándo usarlo?: Cuando necesitas seleccionar el elemento anterior de forma segura, ignorando nodos de texto.

Ejemplo: Resaltar los Elementos Hermanos

A continuación vamos a aplicar estos métodos en un ejemplo práctico. Al hacer clic en un elemento <li>, su hermano siguiente cambiará de color.

<ul id="lista">
  <li onclick="resaltarSiguiente(this)">Elemento 1</li>
  <li onclick="resaltarSiguiente(this)">Elemento 2</li>
  <li onclick="resaltarSiguiente(this)">Elemento 3</li>
</ul>

<script>
  function resaltarSiguiente(elemento) {
    if (elemento.nextElementSibling) {
      elemento.nextElementSibling.style.backgroundColor = "yellow";
    } else {
      alert("No hay un elemento hermano siguiente.");
    }
  }
</script>

En el código anterior pasa lo siguiente:

1. Al hacer clic en un <li>, se ejecuta la función resaltarSiguiente().
2. Se obtiene el siguiente hermano con nextElementSibling.
3. Si el siguiente hermano existe, cambia su color de fondo.
4. Si no hay un hermano siguiente, se muestra un mensaje de alerta.

Diferencias entre Métodos de Selección de Hermanos

📌 Resumen de diferencias clave entre los métodos:

• nextSibling y previousSibling: Devuelven cualquier tipo de nodo, incluidos espacios en blanco y comentarios.
• nextElementSibling y previousElementSibling: Devuelven solo elementos HTML.

Si el HTML tiene espacios en blanco entre los elementos:

<ul>
  <li id="uno">Elemento 1</li>
  
  <li id="dos">Elemento 2</li>
</ul>

<script>
   console.log(document.getElementById("uno").nextSibling); // #text (espacio en blanco)
   console.log(document.getElementById("uno").nextElementSibling); // <li id="dos">
</script>

💡 Siempre usa nextElementSibling y previousElementSibling para evitar errores.

Conclusión

Aprender a navegar entre los elementos hermanos es esencial para manipular el DOM de manera eficiente. En este artículo hemos visto:

✅ Diferencias entre nextSibling y nextElementSibling.
✅ Cómo obtener elementos hermanos sin nodos de texto innecesarios.
✅ Cómo modificar elementos hermanos en el DOM con un ejemplo práctico.