DOM-Manipulation - Das DOM
1. Knoten
Dies ist der zentrale Begriff, um den es beim Verständnis des DOM geht. Dabei unterscheidet man folgende Arten von Knoten:
- Dokumentknoten (er stellt die gesamte Baumstruktur dar)
- Dokumentfragmentknoten (stellt einen Ausschnitt der Baumstruktur dar)
- Elementknoten (repräsentiert ein HTML-/XML-Element)
- Attributknoten (repräsentiert ein Attribut eines HTML-/XML-Elements)
- Textknoten (Textinhalt eines HTML-/XML-Elements oder Attributs)
Nach meinen bisherigen Erfahrungen spielen die ersten beiden Typen keine große Rolle in der Praxis, daher werde ich sie bis auf
weiteres einfach mal ignorieren. Eine Besonderheit sind die Attributknoten. Sie "hängen" nicht in der Baumsstruktur, sondern
sind Eigenschaften der Elementknoten. Den Elementtyp bekommt man mit nodeType, das dabei einen entsprechenden
Wert zurückliefert. Zu den Details dazu komme ich später.
2. node
Dies ist das Objekt, um innerhalb einer HTML/XML-Datei unterschiedliche Knoten anzusteuern. Dabei wird es nicht
direkt angesprochen, wie sonst üblich. Man wählt zuerst das gewünschte Element aus und nimmt die Manipulation
über die entsprechenden Methoden und Eigenschaften des node-Objektes vor. Eine komplette Übersicht gibt es dazu
wie gehabt bei SelfHTML.
Wichtig
node ist ein Unterobjekt des document-Objektes. Daher benötigt man recht oft auch Eigenschaften und
Methoden von Letzterem, um Knoten entsprechend anzusteuern oder manipulieren zu können.
3. Ein Beispiel
<div id="bla">
<h1>Blubb</h1>
<p>
Blubber, kräh, bla <span>schwall, laber</span> Jodelblah
</p>
</div>
Erläuterung
in diesem Codebeispiel haben wir an oberster Stelle einen Elementknoten, der gleichzeitig das Elternelement ist,
nämlich das <div id="bla">, das obendrein über einen Attributknoten (id) verfügt. Darin
befinden sich nun die beiden Elementknoten <h1> und <p>, die die Kindelemente
des <div id="bla"> sind. Das erste davon (<h1>) beinhaltet nur ein weiteres "Kind",
das in diesem Fall ein Textknoten ist.
Besonders wichtig für das Verständnis ist aber das zweite Kindelement, der Absatz. Der besteht nämlich
aus drei(!) weiteren Elementen. Da hätten wir zuerst einen Textknoten mit dem Wert Blubber, kräh, bla.
Daran schließt sich ein Elementknoten <span> mit dem zusätzlichen Textknoten schwall, laber
an. Zum Abschluss gibt es dann einen weiteren Textknoten mit dem Inhalt Jodelblah.
Zugriff
Will man nun auf den Text schwall, laber zugreifen, so muss man sich die Vorgehensweise in etwa so vorstellen:
- Ich nehme das Elternelement
<div id="bla"> - Dann hole ich mir dessen letztes Kindelement, also das
<p> -
Jetzt gibt es zwei Möglichkeiten des Zugriffs auf das
<span>-Element, die vom Resultat her zwar identisch sind, aber eine unterschiedliche Vorgehensweise verlangen- Ich hole mir den ersten Knoten vom Typ Element
- oder ich hole mir den zweiten Kindknoten von
<p>
- Abschließend nehme ich den ersten Kindknoten des
<span>-Elements, und hole mir dessen Inhalt
4. Besonderheiten
Laut Spezifikation sind Leerzeichen oder Zeilenumbrüche im Quellcode bereits Textknoten. Aber nicht im Internet Explorer 8 und abwärts. Der interpretiert nur die tatsächlichen Inhalte. Was mal wieder ein Beweis dafür ist, dass Spezifikationen nicht immer die besseren Lösungen anbieten. Auf diese Problematik gehe ich beim Abschnitt Knoten überprüfen ein. Bis dahin ignorieren wir diese Tatsache erst mal, da es meiner Meinung nach dem grundsätzlichen Verständnis abträglich ist.
Ein wichtiger Hinweis
Wegen besagter Spezifikation werden einige Beispiele nicht funktionieren. Die präsentiere ich euch nur zu Anschauungszwecken. Also wenn ihr die ausprobiert und es nicht klappt, so liegt es daran.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt