Dynamisches HTML

Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML) oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Methoden, bei denen während der Anzeige einer Webseite diese selbst, ausgelöst durch Benutzereingaben, verändert wird.

Der Begriff "dynamisch" bezieht sich dabei auf die Idee, dass diese Änderungen von Ereignissen bedingt werden, die auch mehrfach beim Anzeigen einer Seite auftreten können.

Beispiele für dynamische Anzeigeeffekte sind

das Erscheinen ("Aufklappen") eines Menüs
die Hervorhebung eines Textes
die Möglichkeit, Objekte durch Drag & Drop auf dem Bildschirm zu verschieben
Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen
Webseiten, die sich wie Client-seitige Anwendungsprogramme bedienen lassen.

Techniken

Dynamisches HTML umfasst die folgenden Techniken:

HTML zum Verfassen von Dokumenten
eine clientseitige Skriptsprache, meistens JavaScript
eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das Document Object Model (DOM) verwendet
XMLHttpRequest, um Daten zwischen dem Browser und einem entfernten HTTP-Server auszutauschen (siehe auch Ajax).
ein Format zur Übertragung strukturierter Daten, etwa XML oder auch JSON

Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können.

Beispiele

Dynamisches Verändern eines Textabsatzes

Ein einfaches Beispiel eines dynamischen HTML Abschnitts, bei dem sich der dargestellte Text beim Anklicken verändert:

...
<p onclick="this.firstChild.nodeValue = 'Danke'">Klick mich</p>
...

Erstellen eines Inhaltsverzeichnisses

In folgendem Beispiel werden alle h2-Elemente des HTML-Dokuments mit einer individuellen ID versehen und anschließend deren Inhalt in eine geordnete Liste <ol> geschrieben. Ferner sind die Einträge des so entstandenen Inhaltsverzeichnisses anklickbare Links, die auf das jeweilige h2-Element verweisen.

<!DOCTYPE html>
<html>
    <head>
        <title>Automatisches Inhaltsverzeichnis</title>
        <meta charset="ISO-8859-1" />
    </head>
    <body>
        <h1>Automatisches Inhaltsverzeichnis</h1>
        <h4>Inhaltsverzeichnis</h4>
            <ol id="contents">
                <li></li>
            </ol>
        <h2>Lorem Ipsum</h2>
        <p><!-- Textabsatz --></p>
        <h2>Test</h2>
        <p><!-- Textabsatz --></p>
        <h2>Beispiel</h2>
        <p><!-- Textabsatz --></p>
        <script type="text/javascript">
            function makeContents() {
                var chapters = document.getElementsByTagName('h2');
                var htmlString = "";
                var number = chapters.length;
                var i = 0;
                while(i < number)
                {
                    var chapterid = 'c' + i;
                    chapters[i].setAttribute('id', chapterid);
                    htmlString = htmlString + '<li><a href=\"#c' + i + '\">' + document.getElementById(chapterid).innerHTML + '<\/a><\/li>';
                    i++;
                }
                document.getElementById('contents').innerHTML = htmlString;
            }
            document.onload = makeContents();
        </script>
    </body>
</html>

Die Zeile

var chapters = document.getElementsByTagName('h2');

liefert alle h2-Elemente in einem Array.

Nun wird eine Variable definiert, die später als der Inhalt des <li>-Elements angezeigt werden soll. Sie ist zunächst noch leer und wird gleich beschrieben werden.

var htmlString = "";

Mithilfe einer while-Schleife wird nun über das Array mit den h2-Elementen iteriert, es könnte allerdings genauso gut eine for each-Schleife verwendet werden (siehe auch JavaScript#Kontrollstrukturen).

Für jedes h2-Element wird nun eine ID gesetzt, um diese später verlinken zu können (siehe Anker_(HTML)):

var chapterid = 'c' + i;
chapters[i].setAttribute('id', chapterid);

Schließlich wird dem vorher definierten String (wegen der while-Schleife pro h2-Element) ein Listen-Item <li> mit Link zum aktuellen h2-Element hinzugefügt.

Das Anzeigen des Strings erfolgt in folgender Zeile:

document.getElementById('contents').innerHTML = htmlString;

^[1]

Kritik und Nachteile

Oft wird dynamisches HTML für effekt-orientierte Funktionen verwendet, bei denen der Nutzen nicht klar erkennbar ist und die eher stören.

In der Anfangszeit konnte DHTML nur über Browser-spezifische sogenannte DHTML-Modelle realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff DOM Scripting verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte.

Dynamisches HTML stellt teils hohe Anforderungen an die Javascript-Fähigkeiten des Browser, die nur von der neuesten Browsergeneration erfüllt werden. Auch wenn die Verwendung von Javascript aus Sicherheitsgründen deaktiviert wird, kann dynamisches HTML nicht verwendet werden. Darüber hinaus kann sich die Zugänglichkeit für Anwender verschlechtern, die wegen körperlichen Einschränkungen auf alternative Eingabe- bzw. Ausgabemethoden zurückgreifen müssen (siehe Barrierefreies Internet). Es ist aber möglich, dynamisches HTML so zu verwenden, dass es nur bei Browsern verwendet wird, die damit auch umgehen können. Die übrigen Anwender können die Website dann verwenden, als ob diese gar kein dynamisches HTML einsetzen würde. Auch Suchmaschinen können dynamisches HTML nicht verwenden und bei falscher Anwendung nicht mehr alle Inhalte der Seite auffinden.

Siehe auch

Dynapi (Entwicklung 2005 eingestellt)
Web Service,
XML-RPC

Einzelnachweise

↑ http://webcode-blog.org/: Automatisches Inhaltsverzeichnis mit JavaScript, abgerufen 25. 09. 2011

Weblinks

[1] ttp://webcode-blog.org/: Automatisches Inhaltsverzeichnis mit JavaScript, abgerufen 25. 09. 2011

[1]