Hauptmenü

Untermenü

DOM-Manipulation - Knoten ansteuern

1. Blagen

Nachdem man sich, wie im vorherigen Abschnitt beschrieben, ein Wurzelelement gesucht hat, so kann man nun auf die einzelnen Kindelemente zugreifen (Anm. des Verfassers: Blagen = im Sauerland abfällige Bezeichnung für Kinder). Dabei gibt es mehrere Möglichkeiten.

2. Direkter Zugriff über die Reihenfolge

Dazu nehmen wir mal folgenden Codeausschnitt aus einem HTML-Dokument. Die Zeilenumbrüche habe ich erst mal weggelassen, um euch nicht zu irritieren.


<div id="rahmen"><h1>Überschrift</h1><p>Text 1</p><p>Text 2</p></div>

firstChild

Greift auf das erste Kindelement des Wurzelknotens zu. In unserem Beispiel wäre dass die Überschrift:


headline document.getElementById('rahmen').firstChild;

lastChild

Greift auf das letzte Kindelement des Wurzelknotens zu. In unserem Fall handelt es sich dabei um den zweiten(!) Absatz.


absatz_2 document.getElementById('rahmen').lastChild;

2. Indirekter Zugriff über die Reihenfolge

Aber wie kommt man nun an den ersten Absatz? So was wie secondChild oder penultimateChild stellt uns JavaScript nicht zur Verfügung. Daher muss man einen kleinen Umweg gehen. Wenn wir mal bei unserem Beispiel verweilen, so gibt es da wieder zwei Möglichkeiten:

firstChild.nextSibling

Greift auf das nächste Geschwisterelement des ersten Kindelements zu, also das, was nach dem h1 kommt.


wurzel   document.getElementById('rahmen');
absatz_1 wurzel.firstChild.nextSibling;

lastChild.previousSibling

Nimmt das vorherige Geschwisterelement des letzten Kindelements, also das vor dem letzten Absatz.


wurzel   document.getElementById('rahmen');
absatz_1 wurzel.lastChild.previousSibling;

3. Direkter Zugriff über Geschwisterelemente

Man kann aber auch nextSibling und previousSibling direkt nutzen. Dies wäre bei dem folgenden Beispiel möglich.


<div id="rahmen">...</div>
<div id="content">...</div>
content document.getElementById('rahmen').nextSibling;
rahmen  document.getElementById('content').previousSibling;

Auch wenn das hier ziemlich sinnfrei ist, da beide Elemente über eine eindeutige ID verfügen. Aber immer schön an das Prinzip denken.

4. Elternelemente ansteuern

Dieser Zugriff kann zum Beispiel dann erfolgen, wenn ein Element eindeutig zu identifizieren ist, aber nicht das übergeordnete. Dazu nimmt man parentNode.


<div class="blubb"><h1 id="header">Überschrift</h1></div>
var container document.getElementById('header').parentNode;

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt