Meldung

06.09.2007 - DIV-Elemente mit JavaScript manipulieren

JavaScript eignet sich zur dynamischen Anpassung von HTML-Elementen. Anhand einiger Beispiele wird ein DIV-Element manipuliert. Derartige Manipulationen sind aber nicht allein mit dem DIV-Element möglich: Vielmehr ist die Änderung von beliebigen HTML-Elementobjekten, wie beispielsweise SPAN-Elementen oder P-Tags, realisierbar. Die DOM-Schnittstelle von JavaScript eröffnet dem Webentwickler eine Reihe von Möglichkeiten eine Internetseite dynamisch an bestimmte Randbedingungen anzupassen.

Eine der zentralen Methoden des Document Object Model, die Methode getElementById, dient dabei dem Ermitteln einzelner HTML-Elemente im Elementenbaum des HTML-Dokuments. Sie gehört zur Schnittstelle des vordefinierten JavaScript Document-Objekts aber auch im Node-Objekt ist sie vorhanden. Weitere Methoden, die Verweise auf die Elemente eines HTML-Dokuments liefern, sind die Methoden getElementsByName und getElementsByTagName die, anders als getElementById keinen Verweis auf ein einzelnes Element, sondern je ein Array mit Elementen liefert, die in der Elementhierarchie enthalten sind.

Das Layout von HTML-Elementen kann über ihre CSS-Eigenschaften angepasst werden. Darüber hinaus lassen sich HTML-Elemente mit Hilfe von JavaScript auch dynamisch in ein HTML-Dokument einfügen. Zu diesem Zweck kennt JavaScript Methoden (createElement und createTextNode), die solche Operationen bewerkstelligen können. Der Browser stellt solche Anpassungen in der HTML-Elementhierarchie umgehend dar.

Im Web 2.0 werden dynamische Anpassungen von Websites mit JavaScript in hohem Maße genutzt. Damit verbunden sind oft leicht skalierbare Web-Services, die Zusatzinformationen liefern. Nutzdaten, die über einen Ajax-Request nachgeladen werden, können in Form von Textdaten in das Dokument eingefügt werden. Für einen Ajax-Request wird das XMLHttpRequest-Objekt genutzt, welches über das Window-Objekt geholt wird.

Aber nicht nur Textdaten werden von Web-Services übertragen: Als Datenformat bei der Übertragung von Nutzdaten von Web-Services wird XML immer beliebter. Dies ist unter Anderem darin begründet, dass JavaScript die nötigen Objekte und Methoden mitbringt, die den Zugriff auf derart strukturierte Daten erleichtert. Das HMTL-Fenster wird schon lange nicht mehr nur zur Darstellung statischer und einfach formatierter Texte genutzt, sondern wurde zur Schnittstelle zu komplexeren Systemen – die Kombination aus HTML und JavaScript gewinnt stetig an Bedeutung.

Zur Demonstration der Formatierungsmöglichkeiten werden verschiedene Funktionen implementiert, die einige Style-Eigenschaften eines DIVs anpassen. Auch kann in einem Beispiel bereits im DIV-Element vorhandener Text durch andere Zeichenketten ersetzt werden. Hier wird das dafür benötigte String vom Benutzer eingegeben, wofür ein Eingabedialog verwendet wird. Ein solcher Dialog wird mit der Methode prompt des Window-Objekts geöffnet.

Alexander Müller