Document Object Model

Das Document Object Model (kurz DOM) ist ein Standard des Word Wide Web Consortium (W3C) und beschreibt die Grundstruktur einer Webseite. Mit der Hilfe des DOM kann man mit JavaScript Teile einer Seite identifizieren und verändern. Außerdem kann man damit durch das HTML navigieren (da dies aufgrund der hohen Anzahl an Knoten sehr aufwendig ist, wird dies allerdings recht selten in der Praxis genutzt).

Wenn der Webbrowser eine Webseite lädt, dann speichert er die Struktur des HTML-Codes mit all seinen Inhalten (Tags, Attribute, usw.) in einem Modell. Er speichert also die Datenstruktur; die Reihenfolge in der die Inhalte vorkommen und deren Hierarchie.

<html>
<head>
  <title>Website</title>
</head>
<body class="home">
  <h1 id="ueberschrift">Eine Überschrift</<h1>
    <p>Ganz<<strong>wichtiger</strong> Text</p>
    </body>
 </html>

Dieser Code resultiert in folgender DOM-Struktur:

DOM-Struktur nach Code

Die oben Angesprochenen Inhalte (Tags, Attribute, usw.) werden vom DOM als eine einzelne Einheit behandelt und werden Knoten genannt.

Die einzelnen Knoten kann man gezielt „ansprechen“ und ändern. Benutzt werden dafür folgende Befehle:

getElementById()

Mit diesem Befehl wird ein Element (Knoten) mit Hilfe seiner ID gesucht und abgerufen. Im Beispiel von oben hat die h1-Überschrift die ID „ueberschrift“. Um diese Überschrift zu suchen, kann man folgenden Code verwenden:

document.getElementById('ueberschrift')

Ausgesprochen bedeutet die Zeile soviel wie: „Durchsuch das Dokument nach einem Tag mit der ID „ueberschrift“.“

„getElemetById()“ ist hierbei der Methodenname, während „document“ das Schlüsselwort ist, welches definiert, wo gesucht werden soll. Das Schlüsselwort ist wichtig und muss vor dem Methodennamen stehen.

Mit folgendem Code ist es möglich, den ausgewählten Bereich zu ändern. Die Eigenschaft Element.innerHTML liest und speichert den Inhalt eines HTML-Elememts. Bei unserem Beispiel aus der Vorlesung wird also der vorhandene Inhalt des Elements ueberschrift1 gelesen und durch meinen eingegebenen Text ersetzt.

var ueberschrift1 = document.getElementById(„ueberschrift“);
ueberschrift1.innerHTML = „Ich habe jetzt eine neue Überschrift!“;

getElementByTagName()

Genau wie bei getElemetById() wird hier nach einem Element gesucht. Allerdings ist hier nicht die ID das Suchkriterium, sondern der Tag. Die Ausgabe von getElementByTagName() ist, nicht wie bei der „ID-Suche“ ein einzelner Knoten, sondern eine Liste von Knoten, welche sich ähnlich wie ein Array verhält.

var links = document.getElementsByTagName( „a“);

beispiel links. liste durchsuchen (for-scheife). indizies lenght

Mit diesem Code werden alle <a>-Tags im Dokument in einer Variable „links“ gespeichert. In dieser Variablen kann man dann über Indizies auf die jeweiligen Tags zugreifen. Die Gesamtzahl der Elemente kann über die Eigenschaft length erfahren werden und die Liste kann mit einer for-Schleife durchlaufen werden.

Eine gemeinsame Verwendung beider Befehle ist auch möglich, um die Suche präziser zu gestalten.

Navigation durch Knoten

Wie schon oben kurz angesprochen, bietet das DOM auch die Möglichkeit, durch den „DOM-Baum“ zu navigieren. Orientiert wird sich hierbei nach der „Familien-Metapher“. Man navigiert von einem Knoten zum anderen, kann dies aber nur in der „Familie ersten Grades“. Das bedeutet nur zwischen Elternknoten, Kinderknoten und Geschwisterknoten.

Um „in eine andere Familie“ zu wechseln, muss man also erst so lange nach „oben“ bis ein gemeinsamer Elternknoten erreicht ist. Das macht das navigieren, vor allem bei komplexen Strukturen, sehr aufwendig.