JavaScript im DOM

Описание: #Vorlesung #Webbasierte #Systeme an der #Technischen #Hochschule #Mannheim

JavaScript im DOM

In diesem Kapitel wird erläutert, wie JavaScript mit dem Document Object Model (DOM) arbeitet, um den Aufbau und das Layout eines geladenen HTML-Dokuments dynamisch zu verändern. Das DOM ist eine vom W3C spezifizierte Schnittstelle, die HTML- oder XML-Dokumente als Baumstruktur darstellt. Jeder Knoten im Baum entspricht einem Objekt, das einen Teil des Dokuments repräsentiert – beispielsweise einen Absatz, eine Überschrift, ein Bild oder ein Formularfeld. Das DOM ist plattform- und sprachenunabhängig und ermöglicht standardisiert den Zugriff auf und die Manipulation von Dokumentstrukturen im Browser. Dies bildet die technische Grundlage für alle dynamischen Webseiten.

Es gibt unterschiedliche DOM-Versionen: DOM Level 0 war ein herstellerspezifisches, heute veraltetes Modell ohne formale Spezifikation. DOM Level 2 ist eine vom W3C standardisierte Schnittstelle, die von allen modernen Browsern unterstützt wird und auf die alle HTML-Elemente und Attribute zugreifbar sind. Sie ermöglicht es, nachträglich Elemente zu erzeugen und in den Dokumentbaum einzuhängen. Der DOM-Baum lässt sich als UML-Klassendiagramm visualisieren: Ein Node ist die Oberklasse, von der alle anderen Elemente erben – jedes Dokument ist ein Node, jedes HTML-Element ist ein spezieller Node, Attribute und Text sind weitere Knotenarten.

JavaScript nutzt die DOM-API, um Elemente zu finden und zu manipulieren. Wichtige Methoden sind `getElementById`, `getElementsByName`, `getElementsByTagName` und – als HTML5-Erweiterung – `querySelector` bzw. `querySelectorAll`, die gezielt einzelne oder mehrere Elemente anhand von CSS-Selektoren ansprechen. Über die DOM-Methoden können neue Knoten (z. B. Elemente, Attribute oder Textknoten) erstellt und in die Baumstruktur eingefügt, verschoben oder entfernt werden. Der Zugriff über die ID ist in der Praxis zu bevorzugen, da IDs eindeutig und universell verwendbar sind, während Name-Attribute nur für bestimmte Tags zulässig und oft nicht eindeutig sind.

DOM-Knoten werden durch Objekte vom Typ „Node“ repräsentiert, die Attribute wie Name, Typ, Wert und Referenzen zu Vater-, Kind- und Nachbarknoten bieten. Damit lässt sich der Baum in jede Richtung durchlaufen. JavaScript kann Knoten klonen, prüfen, ob Kindknoten vorhanden sind, neue Knoten am Anfang oder Ende einfügen, Attribute auslesen, setzen oder löschen und auch den Text eines Knotens gezielt verändern.

Neben der direkten Bearbeitung von DOM-Elementen kann JavaScript auch Inline-Stile (CSS) von HTML-Elementen manipulieren. Hierfür werden Style-Attribute als JavaScript-Objekte mit speziellen Namenskonventionen (CamelCase, z. B. fontSize statt font-size) angesprochen. Die Inline-Stile übersteuern bei der Darstellung externe CSS-Regeln.

Das Kapitel zeigt zahlreiche Beispiele für DOM-Manipulationen: Etwa wie alle Absätze nachträglich gelb eingefärbt werden, wie ein neues Element oder Attribut erzeugt und in den Baum eingefügt oder wie Listenelemente gezielt entfernt werden. Besonders gewarnt wird vor der direkten Zuweisung von HTML-Code über innerHTML, da dies schnell zu komplexen und potenziell unsicheren Strukturen führt. Besser ist immer die Erzeugung und Zuweisung von DOM-Knoten über die bereitgestellten Methoden.

Abschließend werden die vielfältigen Navigationsmöglichkeiten im DOM erläutert: Vom Zugriff auf Kind- und Elternknoten über Geschwisterelemente bis zur gezielten Attributmanipulation. JavaScript macht es so möglich, Webseiten dynamisch, interaktiv und anpassbar zu gestalten – vom Nachfärben von Absätzen bis zum vollständigen Umbau der Seitenstruktur im laufenden Betrieb.