Node.nextSibling

siguienteNodo = node.nextSibling

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

See Whitespace in the DOM and W3C DOM 3 FAQ: Why are some Text nodes empty? for more information.

Element.nextElementSibling debe ser utilizado para obtener el siguiente elemento ignorando cualquier nodo en blanco.

<div id="div-01">Este es el div-01</div>
<div id="div-02">Este es el div-02</div>

<script type="text/javascript">
  var el = document.getElementById("div-01").nextSibling,
    i = 1;

  console.log("Hermanos de div-01:");

  while (el) {
    console.log(i + ". " + el.nodeName);
    el = el.nextSibling;
    i++;
  }
</script>

<!--
  Lo siguiente se escribe en la consola cuando carga:

      Nodos hermanos del div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT

-->

En el ejemplo anterior, se puede observar que los nodos #text se insertan en el DOM, donde se produce un espacio en blanco en el marcado entre las etiquetas (es decir, después de la etiqueta de cierre de un elemento y antes de la etiqueta de apertura del siguiente). No se crea ningún espacio en blanco entre los elementos insertados por la sentencia document.write.

La posible inclusión de los nodos de texto en el DOM se debe permitir cuando se atraviese el DOM utilizando nextSibling. Vea los recursos en la sección Notas.

• Element.nextElementSibling