Stil mit {stil}

Jan 2009

Die Module des Javascript DOM (Document Object Model) beim W3C

Die Zentrale des DOM ist die Core-Spezifikation, die das Dokument selbst definiert. In weiteren Modulen beschreibt das DOM die Ereignissteuerung (Events Specification) und den Zugriff auf die Stile (Style Specification).

Jedes dieser Module definiert ein Objekt (DocumentEvent, DocumentRange, DocumentStyle, DocumentView) als Verbindung zwischen dem Document-Objekt und seinen zusätzlichen Modulen. Ein Beispiel für die Brücken zwischen den Modulen ist die createEvent()-Methode des DocumentEvent-Objekts, die unabhängig vom Benutzer oder vom System Ereignisse außerhalb der normalen Ereignisse erzeugt.

• Document Object Model (DOM) Core Specification
• Document Object Model (DOM) Load and Save
• Document Object Model (DOM) Validation Specification
• Document Object Model (DOM) HTML Specification
• Document Object Model (DOM) Events Specification
• Document Object Model (DOM) Style Specification
• Document Object Model (DOM) Traversal and Range Specification
• Document Object Model (DOM) Views Specification

Mit dem Window Object 1.0 W3C Working Draft 07 April 2006 schließt das W3C auch noch die Lücke zwischen der ECMAScript-Spezifikation und dem DOM durch die Standardisierung des Window-Objekts, aber das steht auf einem anderen Blatt.

Document Object Model Events

Das Event Model des DOM für die Verarbeitung von Ereignissen gewinnt zunehmend an Bedeutung, da es Schwachstellen des traditionellen Event Handlings beseitigt. DOM Events erlaubt eine flexible Registrierung von Event Handlern, beschreibt, wie Ereignisse durch die Struktur des Dokuments reisen und stellt Informationen über ein Ereignis zur Verfügung.

Dabei bewahrt das Event Model des DOM ein hohes Maß an Kompatibilität zum tradionellen Event Handling, so dass sowohl tradionelles Event Handling als auch das Event Handling des W3C in einem Dokument friedlich zusammen existieren können.

Ereignisse werden mit der Methode addEventListener() angemeldet. So können mehrere Funktionen beim Eintreten eines Ereignisses registriert werden und zusätzliche Skripte sind unabhängig von den Vorhandenen.

window.addEventListener ('load', changeColor, false);
window.addEventListener ('load', findH2, false);

Im konventionellen Ansatz musste mit jedem zusätzlichen Skript, dass beim Eintreten eines Ereignisses ausgeführt werden sollte, eine Funktion als Zwischenhändler jedes einzelne Skript starten:

body.onload = initSkripts;

function initSkripts()
{
   changeColor;
   findH2;
}

Wenn eines dieser beiden Skripte wieder entfernt soll, muss auch der Aufruf der Funktion aus dem Wrapper initSkripts() gelöscht werden.

Document Object Model HTML

DOM HTML ergänzt die Core-Spezifikation und stellt Objekte und Methoden zur Manipulation von HTML-Dokumenten zur Verfügung, um häufig benutzte Operationen in HTML-Dokumenten komfortabel zu gestalten. DOM HTML beschäftigt sich ausschliesslich mit HTML-Dokumenten, während die allgemeiner gehaltenen Objekte und Methoden von DOM Core sowohl für HTML- als auch für XML-Dokumente gedacht sind.

DOM HTML ist überall von Bedeutung, wo die Schnittstellen des DOM Core nicht in allen Browsern korrekt implementiert sind, oder wo Implementierungen, die ausschliesslich für HTML-Dokumente gedacht sind, auf die Generalität des DOM Core verzichten und die Bequemlichkeiten und die höhere Ausführungsgeschwindigkeit des DOM HTML vorziehen.

Unverzichtbar ist die Manipulation der style-Eigenschaft von HTML-Elementen.

Schriftart ändern Schriftart zurücksetzen

style ist eine Eigenschaft von HTML-Elementknoten, die den Inline-Stil von HTML-Tags liest und ändert.

<p id="jsDOM2">Besonders großer Beliebtheit erfreuen sich die Manipulationen 
    der style-Eigenschaft von HTML-Elementen. </p>

Die DOM-Methode getElementById() liest das Element mit der id jsDOM2, um die CSS-Eigenschaft font-family und color zu ändern. Wer sein CSS kennt, muss nicht einmal in der ellenlangen Liste der möglichen Werte der style-Eigenschaft nachsehen, um einen Stil zu ändern: Der Wert streicht den Bindestrich in den Namen von CSS-Eigenschaften und schreibt das erste Zeichen des folgenden Begriffs mit einem Großbuchstaben: Aus der CSS-Eigenschaft font-family wird fontFamily.

function showNewStyle()
{
   var elem = document.getElementById('jsDOM2');
   elem.style.fontFamily = "Verdana, Arial";
   elem.style.color = "red";
}

function resetStyle()
{
   var elem = document.getElementById('jsDOM2');
   elem.style.fontFamily = "Georgia, serif";
   elem.style.color = "black";
}

Document Object Model Style

Die Document Object Model (DOM) Level 2 Style Specification gibt es zwar bereits seit dem Jahr 2000, aber sie ist nicht so populär wie das Document-Objekt. Die Style-Spezifikation ist das Javascript-Interface zu Stylesheets, die durch das STYLE- oder LINK-Element in das Dokument eingebunden werden und ergänzt die Methoden getAttribute() und setAttribut().

Document Object Model Views

Ein Dokument (Input) und mehrere Views (Ansichten, Output) auf ein Dokument, z.B. nach der Anwendung eines Stylesheets oder innerhalb von Frames. Hat bislang noch keine Bedeutung.