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>

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.