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