Rüdiger Plantiko

Das leidige JavaScript-DOM-Attribut nextSibling liefert manchmal DOM-konform auch den Leerraum zwischen zwei Elementen als Sibling (so machen es Firefox, Chrome und MSIE ab Version 8), manchmal das nächste Element (MSIE bis einschliesslich Version 7). Da man in 99% der Fälle an dem interessiert ist, was Microsoft als nextSibling implementiert hatte, nämlich am nächsten Element, beeilte sich Mozilla, in ihrer DOM-Implementierung ein proprietäres Attribut nextElementSibling hinzuzufügen, das auf das nächste Element zeigt. Damit waren aber nun sie ausserhalb des DOM-Standards! Allerdings hat das W3C den Mangel erkannt und im Jahre 2008 einen neuen, zusätzlichen Standard Element Transversal erstellt. Dieser wird vom Internet Explorer ab Version 9 unterstützt. Ab Version 9 kennt also auch der MSIE das Attribut nextElementSibling. Eine lange Geschichte...

Die folgende Funktion liefert browserübergreifend das Gewünschte.

// IE zählt Textknoten ab Version 8 auch zu nextSibling. Vorher tat er das nicht
// Diese Funktion bringt in *allen* Browsern das nächste Element auf gleicher Ebene
function getNextElementSibling(el) {
  var s;
  if (s = el.nextElementSibling) return s;
  s = el;
  while (s=s.nextSibling) { if (s.nodeType==1) return s; }
  return null;
  }

Wenn es um Performance geht - ich hatte eine Liste mit Tausenden von Elementen, für die jeweils das nextElementSibling zu bestimmen war - kann man im Aufruf noch folgende Optimierung einbauen, so dass wenigstens Firefox- und Chrome-User davon verschont bleiben, dass eine neue Ebene im Aufrufstack eröffnet werden muss:

  ...
  next = ( e.nextElementSibling || getNextElementSibling(e) );
  ...