Tutorial de DHTML : Temarios

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.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</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');
  alert(puntero1.childNodes[0].nodeValue);
  var puntero2=puntero1.nextSibling;
  alert(puntero2.childNodes[0].nodeValue);
  var puntero3=puntero2.nextSibling;
  alert(puntero3.childNodes[0].nodeValue);
}

El método 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 un método 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 firefox, a diferencia de Internet Explorer, a un espacio entre dos párrafos lo interpreta y crea un nodo de texto, inclusive un enter también creará un nodo. Para facilitar las cosas, por el momento, cuando quiera acceder a un conjunto de nodos con los métodos nexSibling y previousSibling escriba todo el texto corrido sin saltos de línea.
Por ejemplo:

<p id="parrafo1">1er párrafo</p><p>2do párrafo</p><p>3er párrafo</p>

Más adelante veremos como identificar si se trata de un nodo de tipo elemento o de tipo texto.

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