Document Object Model (DOM)

Document Object Model (DOM)

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse von HTML und Javascript werden vorausgesetzt.



Mini-Webseite


Hier wird versucht, das DOM-Modell ohne theoretische Grundlage an einem möglichst einfachen Beispiel praktisch zu demonstrieren. Das soll den Einstieg in eine solide Ausbildung erleichtern, kann diese jedoch nicht ersetzen.


◀   Links ist eine komplette, eigenständige Mini-Webseite eingebettet, die als Beispiel für dieses Kapitel dient.

Mit diesem Link wird die besonders einfache ↗ Mini-Webseite in einem eigenen Browser-Tab geladen.
Mit diesem Link wird der ↗ HTML-Quelltext der Mini-Webseite angezeigt. Man kann ihn in einer einfachen Text-Datei mini_webseite.html am eigenen Arbeits-PC speichern und mit jedem Browser anzeigen.


HTML-Quelltext

◀   Diesen Text hat ihr Browser erhalten und daraus das angezeigte Bild der Mini-Webseite hergestellt.
Die erste Zeile deklariert den Typ des Dokuments.
Der gesamte restliche Quelltext ist ein einfacher, unformatierter Text, der nach den Regeln (Syntax) der 'Programmiersprache' → HTML abgefasst ist.

Der Quelltext enthält zusätzlich zu den sichtbar angezeigten Daten weitere Elemente, die man als Anweisungen ('Befehle') zur Gestaltung der Mini-Webseite auffassen kann.
Die als Anweisung dienenden HTML-Elemente sind in < > dreieckige Klammern eingeschlossen.
Jedes <element> reicht von seinem Anfang bis zu seinem </element> Ende. Davor, danach und innerhalb des Elements können sich Text-Daten und/oder weitere Elemente befinden. Bei einigen Elementen ohne Daten ist Anfang und Ende zusammengelegt, z.B. beim Element <br/> (Neue Zeile).
Die hier verwendete Text-Formatierung (Einrückungen, Zeilen) wird vom Browser ignoriert: Sie soll lediglich das Verständnis des Beispiels erleichtern.


DOM-Diagramm

Jedes DOM-Modell beginnt mit einem document-Element.
Das document-Element hat genau 1 untergeordnetes child-Element, welches die Wurzel (root) des Objekt-Baums bildet. Im Fall einer Webseite ist das immer ein <html>-Element.
Die child-Elemente des <html>-Elements befinden sich im Quelltext zwischen Anfangs- und Endmarke des Elements - in diesem Fall die beiden Elemente <head> und <body>
Das <head>-Element umschließt im Quelltext die beiden Elemente <meta> und <title>, die im DOM-Modell als seine child-Elemente ausgewiesen werden.
Das <title>-Element enthält im Quelltext zwischen Anfangs- und Endmarke den Text "DOM-Beispiel". Er erscheint im Quelltext nicht als Element in < > sondern als 'Daten' ohne eigene Element-Marke. Im DOM-Modell erscheint der Text unabhängig von seiner Länge als #text-Element. Dieser Text wird als Titel des Browser-Fensters angezeigt.
Ein #text-Element kann - im Gegensatz zu allen anderen DOM-Elementen - keine untergeordneten child-Elemente enthalten.  Jedes #text-Element bildet daher den Endpunkt eines Zweigs der DOM-Baum-Struktur.
Das <body>-Element enthält 4 child-Elemente:  Ein <h1>-Element (Überschrift) mit einem eigenen untergeordneten #text-Element, danach ein #text-Element ("Dies ist..."), ein <br>-Element (Neue Zeile) und zuletzt ein weiteres #text-Element ("Sie zeigt...").


Attribute

Jedes Element (mit Ausnahme der #text-Daten-Elemente) kann individuelle Eigenschaften enthalten. Diese werden im Quelltext innerhalb der Anfangs-Marken als Attribute angegeben, z.B.
<div width="100" height="50">...</div>
In diesem Beispiel werden die beiden Attribute width und height angegeben, mit denen die Eigenschaften 'Breite' und 'Höhe' des <div>-Elements festgelegt werden.

• Ein Attribut ist im DOM-Modell ein eigener Element-Typ. Es kann nur als Sub-Element eines 'echten' DOM-Elements auftreten und weder andere Attribute noch child-Elemente enthalten.

Im Beispiel dieses Kapitels enthält nur das <meta>-Element ein Attribut, in diesem Fall zur Festlegung des → Zeichensatzes.


ChildNodes bezeichnet die Menge aller untergeordneten Elemente eines Elements. Im Objekt-Baum folgt man der Linie nach unten und danach einer beliebigen Abzweigung nach rechts. Jedes DOM-Element kann beliebig viele child-Elemente (auch keines) enthalten.
Die child-Elemente werden mit 0 beginnend fortlaufend nummeriert. Das erste child-Element (firstChild) hat daher immer den Index childNodes[0]

Sibling bezeichnet die Menge aller benachbarten (Geschwister)-Elemente. Im Objekt-Baum folgt man der Linie nach links und danach einer (anderen) Abzweigung der vertikalen Linie nach rechts. Man verwendet gelegentlich die Eigenschaften previousSibling oder nextSibling zur Angabe des vorigen oder nächsten Geschwister-Elements.

Anwendung


Organisation

Das DOM-Modell beschreibt Webseiten und andere → XML-Dokumente eindeutig, vollständig und unmissverständlich.
Damit kann man jedes Element des Dokuments eindeutig identifizieren.
Das ist eine notwendige Voraussetzung für alle hier angeführten Aufgaben.


Einfügen und Löschen

Wenn man ein Element eindeutig identifiziert hat, dann kann man neue Elemente vor oder nach dem adressierten Element einfügen oder ein neues untergeordnetes child in das Element selbst einfügen. Alternativ kann man jedes adressierte DOM-Element löschen.
Beispiel:  


In diesem Web werden DOM-Methoden besonders häufig eingesetzt, weil versucht wird, jedes Thema mit mindestens einem Live-Beispiel zu demonstrieren.

Ein interaktives Beispiel erfordert u.a. diese Arbeiten:
Reaktion auf Ereignisse (z.B. MausKlick, Daten-Eingabe), nachfolgend Änderungen der angezeigten Elemente.

Ein animiertes Beispiel erfordert typisch viele rasch wiederholte Änderungen von Element-Eigenschaften wie Position, Drehwinkel oder Farbe.

DOM-Methoden für Elemente


In diesem Kapitel werden aus der Vielzahl der Javascript DOM-Methoden einige wenige ausgewählte Methoden zu diesem Thema vorgestellt.

Das nächste Kapitel zeigt ausgewählte Methoden zur Änderung der ↓ Eigenschaften von Elementen.


Wenn man DOM-Methoden auf ein HTML-Element anwenden will, dann erteilt man ihm ein id-Attribut, z.B:
<div id="demo31">
Beispiel-31
</div>
Der Wert des Attributs (hier demo31) muss inerhalb des Dokuments eindeutig sein, d.h. der gleiche Wert darf nicht nochmals vorkommen.
Das Beispiel zeigt 1 div-Element mit 1 untergeordneten #text-Daten-Element.

Zur Adressierung dient die Methode getElementById()
Mit dieser Javascript-Anweisung
var node31 = document.getElementById('demo31');
wird das angegebene HTML-Element als Objekt an eine Variable (hier: node31) zugewiesen.


Beispiel:
Mit diesen Javascript-Anweisungen wird ein <br>-Element (Neue Zeile) und ein Text-Daten-Element erzeugt und in das oben adressierte Element demo31 eingefügt:
var nbr = document.createElement('br');
node31.appendChild(nbr);
var ntxt = document.createTextNode('Neuer Text');
node31.appendChild(ntxt);
Mit Klick auf diesen Link wird das Beispiel Live ausgeführt.


Beispiel:
Mit diesen Javascript-Anweisungen werden jeweils die beiden letzten child-Elemente von Element demo31 gelöscht:
var nca = node31.childNodes;
node31.removeChild(nca[nca.length-1]);
node31.removeChild(nca[nca.length-1]);
Im vorigen Beispiel werden mit jedem Klick 2 neue Elemente (Zeilen-Umbruch, Neuer Text) erzeugt. Daher muss man hier 2 Elemente löschen, um 1 Zeile zu entfernen.
Mit Klick auf diesen Link wird das Beispiel Live ausgeführt.
Das Beispiel ist willkürlich begrenzt: Man kann nur die neu erzeugten Elemente löschen, der Original-Text des Beispiels bleibt erhalten.

DOM-Methoden für Eigenschaften und Attribute


Für alle hier vorgestellten Beispiel gilt, dass man vor Anwendung der gezeigten Methoden das gewünschte DOM-Element eindeutig adressieren muss.
Das vorige Kapitel zeigt die wichtigste Methode zur ↑ Adressierung.


HTML-Beispiel:
<div id="demo41">
Beispiel-41
</div>
Das Beispiel zeigt ein div-Element mit einem untergeordneten #text-Daten-Element.

Javascript-Anweisungen:
var node41 = document.getElementById('demo41');
alert(node41.firstChild.nodeValue);
node41.firstChild.nodeValue = 12:34:56
Mit Klick auf diesen Link wird der aktuelle Wert der Eigenschaft nodeValue gelesen und angezeigt.
Mit Klick auf diesen Link wird die aktuelle Zeit als neuer Wert der Eigenschaft nodeValue eingetragen.

Die gezeigte Methode (Verwendung von nodeValue) wird in diesem Web zur Änderung von Daten in Dokumenten bevorzugt. Sie ist sehr schnell sowie für HTML und alle Mitglieder der → XML-Familie verwendbar. Alternativ kann man die Eigenschaft innerHTML verwenden, jedoch langsamer und nur für HTML.


HTML-Beispiel:
<div id="demo51" style="width:50%;">
Breite = 50%
</div>
Javascript:
var node51 = document.getElementById('demo51');
alert(node51.style.width);
node51.style.width = 50 + '%';
Mit Klick auf diesen Link wird der aktuelle Wert der Eigenschaft style.width gelesen und angezeigt.
▶ Bei jeder Änderung des SchiebeReglers wird dessen aktueller Wert gelesen und damit die Eigenschaft style.width des Elements überschrieben. Alle DOM-Methoden werden mit sehr großer Geschwindigkeit ausgeführt.



Mit Methode removeAttribute() kann man ein Attribut formal löschen. Die entsprechende Eigenschaft wird jedoch meist nicht 'gelöscht' sondern durch die Standard-Vorgaben des jeweiligen Browsers ersetzt (→ CSS-Kaskade).


Mit einem eindeutigen id-Attribut kann man das (neu erzeugte) Element zu jedem späteren Zeitpunkt adressieren und z.B. alle Eigenschaften seines style-SubObjekts ändern.

Mit dieser Kombination von DOM-Methoden kann man sehr effizient große Mengen von Elementen erzeugen, z.B. umfangreiche Tabellen, eine komplizierte Objekt-Grafik usw.
Falls dazu externe Daten erforderlich sind, kann man diese mit → AJAX-Methoden vom Server anfordern.
Die Erzeugung mit Javascript DOM-Methoden am eigenen Arbeits-PC ist jener mit PHP am Server-PC weit überlegen. Davon wird in vielen Beispielen dieses Webs Gebrauch gemacht.

DOM-HyperLinks


Wählen sie jene Informationen, die am besten ihren Kenntnissen entsprechen.


SelfHTML:  DOM, DOM-Document

W3Schools:  DOM, DOM-Document, DOM-Elements, DOM-Nodes, DOM-Examples

WhatWG:  DOM