of {$slidecount} ½ {$title}, {$author}

Lecture 06

Prof. Dr.-Ing. S. Gössner

FH Dortmund - University of Applied Sciences

Inhalt

DOM - Dokument Objektmodell

Das DOM ist …

DOM - Tree

Das Dokument Objektmodell besitzt eine Baumstruktur.

Beispiel: HTML-Tabelle [ Quelle:Wikipedia] 

<table>
   <thead>
     <tr>
       <th>Vorname</th>
       <th>Name</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Donald</td>
       <td>Duck</td>
     </tr>
   </tbody>
 </table>

DOM Baumstruktur

DOM Module

ModulFunktionsumfang
Core Erzeugung und Zugriff (lesend/schreibend) auf Objekte eines XML Dokuments.
HTML Spezielle Schnittstelle für HTML-Dokumente
Views Verschiedene Darstellungen eines Dokuments
Style and CSS Informationen einer Stylesheet / CSS-Beschreibung
Load and Save Laden und Speichern von Dokument(en) bzw. -teilen, sowie deren Transport mittels HTTP
Events Behandlung von Ereignissen.
- UIEvents Ereignisbehandlung der Benutzerschnittstelle (UI)
- MouseEvents Ereignisbehandlung des Zeigegeräts (pointing device).
- MutationEvents Ereignisbehandlung bei Änderung von Dokumentinhalt bzw. -struktur.

Core DOM - Objekttypen

Node
Alle DOM-Objekte sind gleichzeitig Node-Objekte per Vererbungsmechanismus. Damit besitzen alle Objekte ein gleichartiges Interface.
Document
In einem XML Dokument gibt es genau ein document Objekt. Dieses stellt gleichzeitig den Wurzelknoten (root node) des Dokuments dar. Das document Objekt definiert eine Reihe zusätzlicher Eigenschaften und Methoden.
Element
Ein Element Objekt wird korrespondierend zu jedem XML-Element erzeugt und besitzt in Erweiterung des Node-Interfaces zusätzliche Eigenschaften und Methoden.
Text
Ein Text Objekt wird für jeden zusammenhängenden textuellen Inhalt von Elementen erzeugt.
Attr
Ein Attr Objekt ist die DOM Analogie zu einem XML Elementattribut. Es gibt weitere Objekttypen, wie Comment, ProcessingInstruction, CDATASection, Entity, …, auf die hier nicht näher eingegangen wird.

Siehe Document Object Model (DOM) Level 2 Core Specification.

Das Dokument - Wurzelobjekt

Alle Node-Objekte eines XML Dokuments sind Kind-Objekte des äußeren Dokument Objekts und besitzen alle einen Verweis (ownerDocument) auf Jenes.

Document - Interface

Property/MethodData TypeFunktionalität
documentElement Element Das äußere (Wurzel-)Element
createElement(tagName) Element Erzeugt ein Element Objekt (factory method).
createTextNode(text) Text Erzeugt ein Text Objekt.
createAttribute(name) Attr Erzeugt ein Attribute Objekt mit dem Name name. Der Attributwert muss nachfolgend separat gesetzt werden.
getElementsByTagName(tagName) Array Sucht alle Elemente mit dem Elementnamen tagName und liefert diese in einer Liste zurück. Wird als Elementname "*" übergeben, erhält man alle Elemente.
getElementById(id) Element Sucht das Element mit dem angegebenen eindeutigen id-Attribut und liefert es zurück. Im Fehlerfalle erhalten wir null.

Das universelle Knotenobjekt

Jeder Knoten im Objektbaum implementiert eine gemeinsame Menge von Eigenschaften und Methoden. Diese bilden gleichzeitig das Interface des Node-Objekts.

Node - Interface

Property/MethodData TypeFunktionalität
ownerDocument Document Dokument Objekt des Knotens
nodeName String Name von Element oder Attribut
nodeValue String Wert eines Attributes
nodeType Number ELEMENT_NODE (1)
ATTRIBUTE_NODE (2)
TEXT_NODE (3)
DOCUMENT_NODE (8)
etc.
parentNode Node Elternknoten
firstChild Node erster Kindknoten
lastChild Node letzter Kindknoten
childNodes Array alle Kindknoten
nextSibling Node nächster Geschwisterknoten
previousSibling Node vorheriger Geschwisterknoten
attributes Array Liste aller Attribute (nur Element Objekte)
appendChild(newNode) Node Setzt einen neuen Kindknoten newNode ans Ende der Liste.
insertBefore(newNode,node) Node Fügt einen neuen Kindknoten newNode vor dem existierenden Knoten node der Liste ein.
removeChild(node) Node Entfernt den Knoten node aus der Liste.
replaceChild(newNode,node) Node Ersetzt den Knoten node der Liste durch den neuen Kindknoten newNode.

Element Objekt

Element Objekte sind die am häufigsten benötigten Nodes während des Arbeitens mit dem DOM.

Element - Interface

Property/MethodData TypeFunktionalität
tagName String Elementname
hasAttribute(name) Boolean Gibt die Existenz von Elementattributen an.
getAttribute(name) String Liefert den Wert des Attributs mit dem Namen name.
setAttribute(name,value) - Setzt den Wert des Attributes mit dem Namen name auf den Wert value.
removeAttribute(name) - Entfernt das Attribut mit dem Namen name aus der Attributliste des Elements.
getElementsByTagName(tagName) Array Sucht alle Kindelemente mit dem Elementnamen tagName und liefert diese in einer Liste zurück. Wird als Elementname "*" übergeben, erhält man alle Kindelemente.
innerHTML String Enthält den Auszeichnungstext aller Kindknoten (Markup). Kann sowohl gelesen als auch geschrieben werden. Diese Eigenschaft ist nicht innerhalb des W3C DOM Standards definiert. Sie wurde jedoch allgemein als sehr nützlich empfunden und wird mittlerweile von nahezu allen Browserherstellern implementiert.

Window Objekt

Das window Objekt wird von allen Browsern (auch Plugins) implementiert. Es ist jedoch kein W3C DOM Objekt. Eine Übernahme ins W3C DOM wird gegenwärtig diskutiert.

Window - Interface

Property/MethodData TypeFunktionalität
document Document Das zugehörige document Objekt.
name String Name des Window Objekts.
status String Text der Statusleiste.
alert(text) String Erzeugt ein Meldungsfenster mit dem Text text.
confirm(text) String Erzeugt ein Bestätigungsfenster mit dem Text text.
prompt(text) String Erzeugt ein Texteingabefenster mit dem Meldungstext text.
setInterval(func,delay)
setTimeout(code|func,delay) 		- Führt eine Function func oder ein Codestück code jeweils nach einer Verweilzeit delay periodisch aus.

Inkorrekte Einbindung von DOM-Aufrufen

Ein zuverlässiges Arbeiten mit DOM Methoden ist nur dann gegeben, wenn das betreffende HTML– oder XML–Dokument vollständig geladen ist.

Im nachfolgenden Beispiel werden die ersten beiden script Elemente vor dem h1 Element beim Seitenaufbau durch den Parser erzeugt.

Das h1 Element, auf welches diese Bezug nehmen, ist noch nicht vorhanden und führt zu einer Fehlfunktion.

Erst im dritten script Element kann auf das voranstehende h1 Element ggfs. zugegriffen werden. 

<html>
  <head>
    <title> DOM Access </title>
    <script type="text/javascript">
       alert("found(1): " + document.getElementById("header"));
    </script>
  </head>
  <body>
    <script type="text/javascript">
       alert("found(2): " + document.getElementById("header"));
    </script>
    <h1 id="header">DOM Access</h1>
    <script type="text/javascript">
       alert("found(3): " + document.getElementById("header"));
    </script>
  </body>
</html>

Korrekte Einbindung von DOM-Aufrufen

DOM Methoden sollten grundsätzlich nur nach dem vollständigen Laden eines Dokuments erfolgen. Hierzu bietet sich der onload Event-Handler an. 

<html>
  <head>
    <title> DOM Access </title>
    <script type="text/javascript">
       function init() {
          alert("found: " + document.getElementById("header"));
       }
//     window.onload = init;
    </script>
  </head>
  <body onload="init();">
    <h1 id="header">DOM Access</h1>
  </body>
</html>

Zugriff auf CSS Eigenschaften

Die CSS–Eigenschaften können mittels DOM über das style–Attribut, gefolgt von der Eigenschaftsbezeichnung, gelesen und geschrieben werden.

Da die CSS–Eigenschaftsbezeichnungen (z.B. border-top-color) jedoch nicht den Anforderungen für Javascript Variablennamen entsprechen (Bindestrich ist nicht erlaubt), gilt folgende Transformation:

  1. alle einem Bindestrich folgenden Buchstaben werden gross geschrieben.
  2. alle Bindestriche werden weggelassen.

Aus border-top-color wird also borderTopColor.

<html>
  <head>
    <title> CSS Access </title>
    <script type="text/javascript">
       function init(x) {
          document.getElementById("header").style.backgroundColor = "green";
       }
       window.onload = init;
    </script>
  </head>
  <body>
    <h1 id="header" style="background-color:"red">CSS Access</h1>
  </body>
</html>

Navigieren im DOM-Tree

HTML Dokument 

<html>
  <head>
    <title> DOM Navigation </title>
  </head>
  <body>
    <h2>DOM Test</h2>
    <ul compact="true">
      <li id="one">eins</li>
      <li id="two">eins</li>
      <li id="three">eins</li>
    </ul>
  </body>
</html>

DOM Scripting 

var node = document;     window.alert(node.nodeName);
node = node.firstChild;  window.alert(node.nodeName);
                         window.alert(node.childNodes.length);
node = node.lastChild;   window.alert(node.nodeName);
node = node.firstChild;  window.alert(node.nodeName);
node = node.nextSibling; window.alert(node.nodeName);
node = node.nextSibling; window.alert("\"" + node.data + "\"");
node = node.nextSibling; window.alert(node.nodeName);
                         window.alert(node.childNodes.length);
                         window.alert(node.hasAttributes());
                         window.alert(node.getAttribute("compact"));
node = document.getElementById("one");
                         window.alert(node.nodeName);
                         window.alert(node.getAttribute("id"));
node = node.parentNode.parentNode;
                         window.alert(node.nodeName);
var nodes = node.getElementsByTagName("li");
                         window.alert(nodes.length);

[ Ausführen]

Modifikation von Elementen und Attributen

HTML Dokument 

<html>
  <head>
    <title> DOM Modifikation </title>
  </head>
  <body>
    <h2>DOM Test</h2>
    <ul compact="true" style="color:blue;border-style:dotted;">
      <li id="one">eins</li>
      <li id="two">eins</li>
      <li id="three">eins</li>
    </ul>
  </body>
</html>

DOM Scripting 

var h2 = document.getElementsByTagName("h2")[0];
                      window.alert(h2.nodeName);
h2.firstChild.data = "DOM Modification Test";
                      window.alert(h2.firstChild.data);
h2.innerHTML = "DOM <i>Modification</i> Test";
                      window.alert(document.getElementsByTagName("i").length);
var node = h2;
while ((node = node.nextSibling).nodeType != 1) ;  // goto next element ..
                      window.alert(node.nodeName);
node.style.color = "red";
                      window.alert(node.style.color);
node.style.borderStyle = "dashed";
                      window.alert(node.style.borderStyle);
for (node=node.firstChild; node.nodeType != 1; node = node.nextSibling) ;
node.setAttribute("id", "four");
                      window.alert(document.documentElement.innerHTML);

[ Ausführen]

Einfügen und Löschen

HTML Dokument 

<html>
  <head>
    <title> DOM Modifikation </title>
  </head>
  <body>
    <h2>DOM Test</h2>
    <ul compact="true" style="color:blue;border-style:dotted;">
      <li id="one">eins</li>
      <li id="two">eins</li>
      <li id="three">eins</li>
    </ul>
  </body>
</html>

DOM Scripting 

var header = document.getElementsByTagName("h2")[0],
    body = header.parentNode;

                         window.alert("los ...");
body.removeChild(header);
                         window.alert("huch ...");
header = document.createElement("h1");
header.setAttribute("title", "neue Überschrift");
header.appendChild(document.createTextNode("Grosser DOM Test"));
body.insertBefore(header, body.firstChild);
                         window.alert(body.firstChild.nodeName);
var node = document.getElementById("two");
                         window.alert(node.innerHTML);
node.removeAttribute("id");
                         window.alert(node.parentNode.innerHTML);

[ Ausführen]