Warnung
Da ich im Moment diese Seite leider nicht mehr aktiv pflegen und auf dem neuesten Stand halten kann, können manche Informationen bereits veraltet sein. Sollten Änderungen von euch bei mir eintreffen, bin ich jedoch gerne bereit diese hier einzupflegen. Auch Leute, die sich um die Seite bzw. deren Inhalt kümmern möchten, sind gerne gesehen.
 Inhaltsverzeichnis  Interaktivität  DOM

10.1DOM

Das Kürzel DOM steht für Document Object Model. Dieses Modell definiert, wie auf einzelne Elemente eines Dokuments zugegriffen werden kann und welche Manipulationsmöglichkeiten für ein Element existieren. Ferner stellt es ein Dokument in einer hierarchischen Struktur bzw. einer Baumstruktur dar. Der Vorteil dieser Darstellung liegt darin, daß ein Zugriff auf die Elemente des Baumes relativ einfach möglich ist. Daneben kann man aber auch neue Elemente hinzufügen oder bestehende Elemente entfernen.

Ein solcher Baum besitzt immer ein einziges Wurzelelement, auch root genannt, an dem beliebig viele Kindelemente, die Eigenschaften besitzen und wiederum weitere Kindelemente enthalten können, angehängt werden.

Zur besseren Veranschaulichung dient das folgende Beispiel einer kleinen SVG-Grafik (siehe  Listing 10-1). Die zu diesem Dokument passende und vereinfachte Struktur des DOM-Baums zeigt  Abbildung 10-1.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="gruppe" transform="scale(3)" style="font-size:12pt;text-anchor:middle;">
    <text x="75" y="20" height="25" width="50" fill="#000">
      <set xlink:href="#ext" attributeName="fill" begin="mouseover" to="#0F0" />
      <set xlink:href="#ext" attributeName="fill" begin="mouseout" to="#F00" />
      Touch me!
    </text>
    <circle id="ext" cx="75" cy="50" r="25" fill="#F00" />
    <text x="75" y="55" >
      <tspan style="font-weight:bold;fill:#FFF;">
        SVG
      </tspan>
    </text>
  </g>
</svg>
Listing 10-1: Beispiellisting zur Demonstration des DOMs

Abbildung 10-1: Das Beispiellisting als Baum dargestellt

Einen objektorientierten Zugriff auf diese Elemente bietet beispielsweise die Programmiersprache JavaScript. Sie erlaubt dabei eine Manipulation des SVG-Dokuments, während es gleichzeitig dargestellt wird.

zum vorherigen Kapitel  Interaktivität
zum nächsten Kapitel  Skripte definieren
 Inhaltsverzeichnis  Interaktivität  DOM