JavaScript DOM in HTML - Document Object Model

JavaScript wurde Mitte der 1990er Jahre entworfen und bietete zunächst nur wenige Möglichkeiten um auf die Struktur eines HTML-Dokuments zuzugreifen. Neben dem skriptgesteuerten Zugriff auf das Dokument wurde auch eine Ereignisbehandlung (s. Events) eingebaut, die einen höheren Interaktionsgrad ermöglichte. Durch die Kombination von HTML mit JavaScript bestand nunmehr die Möglichkeit, das im Browser angezeigte Dokument dynamisch abzuändern und auf Ereignisse, die vom Benutzer ausgingen, zu reagieren. Der Begriff DHTML (abkürzung für dynamic HMTL; dynamisches HTML) wurde geboren.

Anfänglich setzten Browserhersteller unterschiedliche Modelle für den Zugriff auf HTML-Dokumente um. Jeder kochte dabei sein eigenes Süppchen, was dazu führte, dass Programmierer solcher DHTML-Seiten stets mehrere Versionen ihrer Scripte implementieren mussten, da sie nicht davon ausgehen konnten, dass alle Besucher einer Internetseite den selben Browser verwendeten. Aufgrund fehlender Standardisierung musste also bei der Entwicklung von dynamischen Internetseiten erheblicher Mehraufwand betrieben werden – was sich zur Wahrung der Abwärtskompabilität heute noch in erheblichem Maße bemerkbar macht.

Mit dem Document Object Model (DOM) wurde durch das W3C ab 1998 eine Programmierschnittstelle für den Zugriff auf Inhalt, Struktur und Layout von HTML- und XML-Dokumenten spezifiziert. Ziel dieser Spezifikation war es einen einheitlichen sowie verbindlichen Standard für den scriptgesteuerten Zugriff auf HTML-Dokumente, wie auch das Event-Handling zu setzen. Diese Programmierschnittstelle (kurz API für application programming interface) definiert eine Reihe von Klassen mit deren Hilfe auf die Elemente eines Dokuments zugegriffen werden kann. Die Kombination JavaScript/DOM ermöglicht es dem Webentwickler also dynamisch Anpassungen im HTML-Dokument vorzunehmen, indem er – beispielsweise über das Style-Objekt oder aber durch das Einfügen bzw. Löschen von HTML-Elementen – das Layout und den Inhalt des aktuellen HTML-Dokuments anpasst. Bei Ajax wird, in Verbindung mit dem XMLHttpRequest-Objekt zur asynchronen Datenübertragung, das Document Object Model intensiv genutzt, um die nachgeladenen Daten in das aktuelle HTML-Dokument einzuarbeiten.

Zentraler Bestandteil des DOM sind Methoden des Document- und des Node-Objekts, die dazu dienen, einzelne HTML-Elementobjekte (Knoten) aus dem HTML-Elementenbaum zu addressieren (zum Zwecke des Auslesens oder der Anpassung von Knoten), neue Elemente zu erzeugen und vohandene Elemente zu löschen. Aber auch für den Umgang mit XML-Dokumenten bietet DOM alle benötigten Werkzeuge, die eine Verarbeitung erleichtern.

Im Document Object Model wird ein HTML- bzw. ein XML-Dokument in Form eines Baumes abgebildet. Dieser Dokumentenbaum entspricht dabei dem verschachtelten Aufbau eines HTML/XML-Dokuments – einzelne Auszeichnungselemente werden ineinander verschachtelt notiert. Jedes HTML-Tag bildet dabei einen Knoten des Elementbaumes. So kann beispielsweise ein B-Tag (Fett) innerhalb eines P-Tags (Absatz) notiert werden, wodurch gleichzeitig die Struktur im Elementbaum festgelegt ist. Das B-Tag liegt in diesem Falle im P-Tag und diese Elemente stehen somit in einer Eltern-Kind-Beziehung zueinander. Dabei ist das P-Tag das Elter-Element (parent) des B-Tags und dieses wiederum das Kind-Element (child) des P-Tags ist. Dies führt sich Ebene für Ebene fort, wobei Elemente auch mehr als nur ein Kind-Element haben können. Elemente, die den selben Elter haben werden als Geschwisterknoten (siblings) bezeichnet. Aufgrund dieser Struktur ist jedes Element eines HTML-Elementenbaumes ausgehend vom Wurzelelement (dem Wurzelknoten; in HTML-Dokumenten das HTML-Tag) erreichbar.

Es existieren insgesamt 12 Knotentypen, wobei einige ausschließlich bei der Verarbeitung von XML-Dateien von Interesse sind. Bei der Erzeugung von dynamischem HTML mit DOM werden meist nur Elementknoten, Attributknoten und Textknoten benötigt. Nach einlesen des HTML-Dokuments wird der HTML-Elementenbaum aufgebaut, wonach der Zugriff durch die entsprechenden DOM-Methoden erfolgen kann.

JavaScript DOM Element: Abfragen, Erzeugen und Löschen von Knoten eines HTML-Dokuments

Das folgende Beispiel soll einen kleinen Einblick in die Mechanismen von JavaScript/DOM und HTML vermitteln. Es werden Funktionen zur Erzeugung und Löschung, sowie zur Manipulation und Abfrage von Elementen und Attributen mit JavaScript/DOM implementiert. Durch Anklicken der angezeigten Links können Sie die jeweiligen Operationen einleiten. Aufgrund der ausführlichen Kommentierung des unteren Scripts, ist wohl keine weitere Beschreibung mehr nötig. Beachten Sie, dass im unteren Beispiel nur die wichtigsten DOM-Methoden genutzt werden.

Hier wird auch die Rolle der Methode getElementById() deutlich. Würde die Möglichkeit des Ermittelns einzelner Elementknoten durch diese (oder auch getElementsByName oder getElementsByTagName) Methode fehlen, so könnte das HTML-Dokument nicht angepasst werden. Durch die Methode window.alert wird der Inhalt des Elements in einer Dialogbox angezeigt. Mit window.prompt wird ein Eingabedialog geöffnet, in dem der Benutzer den neu zu setzenden Inhalt für das Element eingeben kann. Beide zuvor genannten Methoden sind Bestandteil des vordefinierten JavaScript-Objekts Window.

<!-- HTML-Element mit entsprechender ID, welches als Parent-Element eingesetzt wird, definieren -->
SPAN-Element:<span id="beispielelement" title="Titelattribut"></span><br>
<!-- Links zur interaktiven Nutzung des Beispiels -->
<a href="javascript:neuesElement ()" title="">neues Element</a><br>
<a href="javascript:showText ()" title="">Inhalt des Elements anzeigen</a><br>
<a href="javascript:setText ()" title="">Inhalt des Elements modifizieren</a><br>
<a href="javascript:showAttribute ()" title="">Titel-Attribut des Elternelements anzeigen</a><br>
<a href="javascript:setAttribute ()" title="">Titel-Attribut des Elternelements  modifizieren</a><br>
<a href="javascript:elementEntfernen ()" title="">Element wieder entfernen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Anhängen eines neuen EM-Elements an das HTML-Element mit der ID beispielelement
function neuesElement () {
  // Knoten ermitteln, der als Elter-Element dient...
  var elterknoten = document.getElementById ('beispielelement');
  // HTML-Elementknoten erzeugen (EM-Tag)...
  var kindknoten = document.createElement ('em');
  // Textknoten erzeugen...
  var textknoten = document.createTextNode ('dynamischer Inhalt');
  // Textknoten an das erzeugte Kindelement anhängen...
  kindknoten.appendChild (textknoten);
  // und zum Schluß noch den neuen Knoten an den Elternknoten hängen.
  elterknoten.appendChild (kindknoten);
}

// Funktion zeigt den Inhalt des Titelattributs vom SPAN-Element an
function showAttribute () {
  // Titelattribut des Ausgangsknotens anzeigen
  alert (document.getElementById ('beispielelement').getAttribute ('title'));
}

// Funktion zur Änderung des Titelattributs
function setAttribute () {
  // Titelattribut des Ausgangsknotens ändern
  document.getElementById ('beispielelement').setAttribute ('title', window.prompt ('Bitte einen neuen Titel eingeben'));
}

// Text-Inhalt des ersten vorhandenen Kindelements in einer Alert-Box ausgeben
function showText () {
  // Verweis auf Ausgangsknoten ermitteln...
  var elterknoten = document.getElementById ('beispielelement');
  // Existiert ein Kindelement UND enthält dieser ein weiteres Kindelement
  // UND handelt es sich dabei um einen Textknoten (nodeType 3)?
  if (elterknoten.hasChildNodes () && elterknoten.firstChild.hasChildNodes () &&
      elterknoten.firstChild.firstChild.nodeType == 3)
    // Dann wird der Inhalt des Knotens ausgegeben
    alert (elterknoten.firstChild.firstChild.data);
}

// Text-Inhalt des ersten vorhandenen Kindelements auf einen neuen Wert setzen
function setText () {
  // Wir gehen wieder von unserem Parent-Node aus
  var elterknoten = document.getElementById ('beispielelement');
  // Wieder auf Existenz eines untergeordneten Tags mit Textinhalt prüfen
  if (elterknoten.hasChildNodes () && elterknoten.firstChild.hasChildNodes () &&
      elterknoten.firstChild.firstChild.nodeType == 3)
    // Eingabe eines neuen Textinhalts für das Kinelement und setzen des Wertes
    elterknoten.firstChild.firstChild.data = window.prompt ('Bitte den neuen Inhalt eingeben');
}

// Funktion entfernt den ersten Kindknoten des SPAN-Elements, so einer vorhanden ist
function elementEntfernen () {
  // Auch hier wieder ausgehend vom SPAN-Element mit der ID beispielelement
  var elterknoten = document.getElementById ('beispielelement');
  // Hat der Elterknoten mindestens einen Kindknoten?
  if (elterknoten.hasChildNodes ())
    // Dann wird der erste vorhandene Kindknoten gelöscht.
    elterknoten.removeChild (elterknoten.firstChild);
}
// -->
</script>

SPAN-Element:
neues Element
Inhalt des Elements anzeigen
Inhalt des Elements modifizieren
Titel-Attribut des Elternelements anzeigen
Titel-Attribut des Elternelements modifizieren
Element wieder entfernen

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht