Document Object Model - DOM

Websites werden selten nur mit der Beschreibungssprache HTML erstellt. Vielmehr hat man einen Mix aus verschiedenen Sprachen bzw. Programmiersprachen. Um das Aussehen der Elemente festzulegen, wird hauptsächlich CSS verwendet. Für die "Dynamik" von Websites braucht man in der Regel eine Programmiersprache wie z.B. PHP oder JavaScript. Mit Dynamik ist gemeint, dass die Inhalte von Websites zeitnah geändert werden. Dabei wird zwischen serverseitiger und clientseitiger Dynamik unterschieden. PHP ist eine serverseitige Programmiersprache und JavaScript clientseitig.

Ein Beispiel für die serverseitige Programmierung sind Online-Shops. Wenn der Benutzer auf eine Kategorie klickt, dann wird in der Regel eine Datenbankabfrage durchgeführt, um die Produkte aus der Kategorie zu ermitteln. Auf dem Server wird dann der HTML-Code mit allen Texten und Bildangaben zusammengestellt und der Benutzer erhält die "fertige Website". In dem Fall wird die Dynamik auf dem Server ausgeführt.

Bei clientseitigen Programmiersprachen wie JavaScript läuft das anders. Hier erhält der Benutzer keinen fertigen HTML-Code. Vielmehr wird der Code auf dem Clientrechner komplettiert. Ein Beispiel hierfür ist eine Bildergalerie mit JavaScript. Beim Aufrufen der Website wird zunächst der Codemix (HTML, CSS, JavaScript) geladen. Auf dem Clientrechner wird dann der JavaScript-Code ausgeführt (sofern JavaScript nicht deaktiviert ist) und die Box für die Bildergalerie wird mit dem festgelegten Design erstellt. Das bedeutet, die Website enthielt beim Laden vom Server keinen fertigen HTML-Code für die Bildergalerie. Erst auf dem Clientrechner wurde die Bildergalerie durch das JavaScript-Programm erstellt bzw. komplettiert.

Eine gute Frage ist, wie denn auf dem Clientrechner eine Website komplettiert bzw. der HTML-Code geändert werden kann. Das geschieht über das Document Object Model (Abk. DOM). Wenn eine Website geladen wird, wird im Arbeitsspeicher des Clientrechners ein Abbild der HTML-Struktur erstellt, das DOM genannt wird. Es ist hierarchisch (Baumstruktur) aufgebaut und die einzelnen Knoten repräsentieren die Hierarchie des HTML-Dokuments. Die einzelnen Elemente einer Webseite werden innerhalb des DOM's zu Objekten und die Knoten innerhalb der Baumstruktur werden Nodes genannt. Den obersten Knotenpunkt stellt das Objekt document dar. Es beinhaltet den Knoten html und dieser zweigt wiederum in die Bereiche head und body, die weiter verzweigte Objekte enthalten. Angenommen, man hätte folgenden vereinfachten HTML-Code.

<!DOCTYPE html>

<html>

<head>
  <title>Website</title>
</head>

<body>

  <div>
    <h1>Überschrift</h1>
    <p>Absatz mit <strong>wichtigem Text</strong>.</p>
    <p>Absatz mit einem <a href="link.html">Link</a>.</p>
  </div>

</body>

<html>

Daraus würde das folgende DOM erstellt werden, worauf mit JavaScript zugegriffen werden kann.

Beispiel-Zugriff mit JavaScript

Wenn man den folgenden JavaScript-Code vor dem BODY-Tag einfügen würde, würde der Text im ersten Absatz geändert werden.

<script type="text/javascript">
document.getElementsByTagName("p")[0].innerHTML = "Neuer Text durch JavaScript";
</script>

</body>

Schaut man jedoch im Quelltext der Webseite, sieht man im ersten Absatz nach wie vor den ursprünglichen Text. Der Inhalt des ersten P-Tags bzw. die Darstellung des Inhalts wurde mit JavaScript über das DOM manipuliert. Man muss daher zwischen dem HTML-Code der Website und dem DOM unterscheiden.