7 - Accediendo a un nodo hermano (nextSibling y previousSibling)


Si tenemos la referencia de un nodo podemos fácilmente acceder a los otros nodos que se encuentran en la misma altura dentro del árbol que genera el DOM.
Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos, implementaremos una página que contenga tres párrafos y sólo disponemos el id del primero de ellos.
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div>
<p id="parrafo1">Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="accediendo a los tres párrafos" onClick="proximoParrafo()">
</body>
</html>

funciones.js

function proximoParrafo()
{
  var puntero1=document.getElementById('parrafo1');
  while (puntero1!=null)
  {
    if (puntero1.nodeType==Node.ELEMENT_NODE)
      alert(puntero1.childNodes[0].nodeValue);
    puntero1=puntero1.nextSibling;
  }
}

La propiedad nextSibling retorna la referencia del nodo hermano que se encuentra inmediatamente más abajo en el archivo HTML, pero a la misma altura si lo pensamos al archivo HTML como un árbol. También existe una propiedad llamado previusSibling que retorna la referencia del nodo hermano que se encuentra inmediatamente más arriba en el archivo HTML.
nextSibling y previusSibling retornan null en caso de no existir más nodos en dicho nivel.

Recordar:Algo muy importante que hay que tener en cuenta es que si hay un salto de línea entre dos párrafos lo interpreta y crea un nodo de texto.

Ahora entonces para poder recorrer la lista de nodos hermanos podemos disponer una estructura repetitiva y avanzar por la lista. Mediante un if verificamos si se trata de un nodo de tipo elemento y procedemos a acceder a su nodo hijo que contiene el valor del texto del párrafo:

  var puntero1=document.getElementById('parrafo1');
  while (puntero1!=null)
  {
    if (puntero1.nodeType==Node.ELEMENT_NODE)
      alert(puntero1.childNodes[0].nodeValue);
    puntero1=puntero1.nextSibling;
  }

Retornar