JavaScript/DOM/Node/previousSibling

Die Eigenschaft Node.previousSibling speichert aus Sicht eines Knotens den unmittelbar vorhergehenden Knoten im Strukturbaum.

Syntax

vorhergehenderKnoten = node.previousSibling;

• vorhergehenderKnoten: Datenknoten, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.

Anwendungsbeispiel

Beispiel ansehen …

<ol><li id="nr1">Schäufele</li><li id="nr2">Schnitzel mit Pommes</li><li id="nr3">Spaghetti</li></ol>

Das Beispiel enthält eine sortierte Liste ol, deren Kindelemente ohne Leerzeichen direkt hintereinander notiert sind.

  function auswerten() { 
    var geschwister = document.getElementById('nr2').previousSibling.innerHTML; 
    var text = 'vorhergehendes Knoten: <span>' + geschwister + '</span>';
    document.getElementById('ausgabe').innerHTML = text;
  }

Durch einen Klick auf den Button wird mit document.getElementById('nr2') auf das zweite Listenlement zugegriffen und mit previousSibling der vohergehende Geschwisterknoten ermittelt. Mit innerHTML wird der Inhalt ermittelt und in der Variablen text, die noch um eine Beschreibung und ein span-Element erweitert wird, gespeichert. Dies wird dann ausgegeben.

Beachten Sie, dass der li-Tag gleich nach dem schließenden li-Tag steht. Da Leerzeichen und Zeilenumbrüche (Whitespace) einen eigenen Knoten (mit der Ausgabe #text) bilden, würde dieses Beispiel in einem mit Einrückungen versehenen HTML-Dokument nicht funktionieren. Wenn die Elemente dynamisch erzeugt werden, spielt dies natürlich keine Rolle.

Weblinks

• W3C: previousSibling
• MDN: Node.previousSibling