Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Dynamik • Dokument Object Model
⇦ Dynamisches HTML / Webpräsenz ⇨
08.10.2014 11:44:06

Dokument Object Model

DOM

Zuletzt möchte ich noch eine Variante vorstellen, die mehrere Vorteile hat: Sie verwendet normale Links in einer Standardsyntax, welche nur durch einen Namen gekennzeichnet sind. Außerdem benötigt sie keinen <noscript> Teil und ist damit weniger anfällig für Fehler.

Weiterhin lernen sie gleich das wichtige DOM (document object modell) kennen. Mit dem DOM greifen sie über JavaScript auf HTML-Dokumente zu. Im modernen Webdesign spielt es eine gewichtige Rolle.

Das DOM stellt eine Webseite als Baumstruktur dar. Für den Zugriff auf diese Hierarchie stellt JavaScript verschiedene Funktionen bereit. Außerdem präsentiert jeder Knoten im Dokumentenbaum auch ein Objekt in JavaScript (deshalb „DOM“).

Anmerkung: Viele in JavaScript geschriebene Erweiterung verwenden das DOM. Zu bearbeitende Elemente werden einfach mit einem bestimmten Attribut gekennzeichnet. Ein weiteres Beispiel dazu finden sie im Kapitel Bildergallerie.

Im Firefox können sie den DOM-Baum auch mit dem DOM-Inspektor (Extras / Webentwickler / DOM-Inspector) erforschen.

Browser - DOM-Ansicht visitenkarte.html
  • <html xmlns="http://www.w3.org/1999/xhtml">
    • <head>
    • <body onload="convertEmail('Email')">
      • <p>
        • <span id="Name">
          • Christian Hartnick*
          • <br />
        • <span id="Grad">
          • Dipl.-Wirtsch.-Inf.
          • <br />
        • <span class="Kursiv">
          • Freier Berater
      • <address>
        • Sandweg 10
        • <br />
        • 16727 Oberkrämer OT Bärenklau
      • <hr />
      • <ul>
        • <li>
          • Telefon
          • <a href="tel:033045081620">
            • 03304 5081620
        • <li>
          • Fax
          • <a href="fax:033045081621">
            • 03304 5081621
        • <li>
          • Mobil
          • <a href="tel:015175081620">
            • 1517 5081620
      • <p>
        • <a class="Email" href="mailto:hilfe_at_hartnick_dot_de">
          • hilfe_at_hartnick_dot_de*
          • <br />
        • <a class="Email" href="mailto:christian_at_hartnick_dot_de">
          • christian_at_hartnick_dot_de
          • <br />
        • <a href="http://hilfe.hartnick.de">
          • hilfe.hartnick.de

Hervorgehoben sind hier die mitttels der Klasse „Email“ gekennzeichneten Adressen. Diese werden von der JavaScript-Funktion gefunden und umgewandelt!

Beispiel

Übung:

Schauen sie sich die JavaScript- und die HTML-Datei an. Es ist nicht wichtig, den Quellcode zu verstehen. Sie sollten das Script aber als Funktion in die eigene Webseite einbauen können.

(Beispiel 13_visitenkarte_js_dom.html
, Beispiel 13_visitenkarte.js)

Anhang: Tastaturkommandos

Wie sie sehen, rufen sie die JavaScript-Funktion nicht mehr an einer bestimmten Stelle im Code auf, sondern mit einem Attribut im Tag <body onload="convertEmail('Email')">. Da die Funktion auf das DOM zugreift, fügt sie nicht Text in den HTML-Quelltext ein, sondern verändert seine Struktur direkt.

Anmerkung: Eine der beiden Methoden (Aufruf der Funktion direkt im Quelltext oder mit dem Attribut „onload“ im Body) kommt praktisch immer bei externen JavaScript zum Einsatz.

Erklärung

Erläuterungen zum Progamm (für alle die es hier schon interessiert):

while (document.getElementsByClassName ("Email")[i]) {
Solange ein Element im HTML-Code mit dem Attribut class="Email" existiert, durchlaufe die Schleife. (DOM-Funktion)
anker = document.getElementsByClassName ("Email")[i]
Variable anker zeigt auf i-te Element (Objekt) mit der Klasse „Email“.
adresse = anker.href;
Speichere den Wert des Attributs "href".
temp = adresse.split("_at_"); name = temp[0]; domain = temp[1];
Splitte adresse an Zeichenkette "_at_" in Array temp
temp = domain.split("_dot_"); domain = temp[0]; tld = temp[1];
Splitte domain an Zeichenkette "_dot_" in Array temp
adresse = name + "@" + domain + "." + tld;
Setze die Adresse neu zusammen.
anker.href = adresse;
Speichere die "adresse" wieder im Attribut "href".
anker.firstChild.nodeValue = adresse.substr(7,255);
Speichere die "adresse" ohne "mailto:" auch als Wert des Kindknotens – also als Text.
i++;
Erhöhe den Wert der Variable i (entspricht i = i +1;).
}
Ende der Schleife.

Übung:

Zum Abschluss dieser Lektion sollten sie mit dem bisher Gelernten etwas herumspielen, die benutzten Elemente und Funktionen im Referenzbuch oder Web nachschlagen sowie eigene Ideen ausprobieren.

Anhang: Tastaturkommandos

⇦ Dynamisches HTML / Webpräsenz ⇨
Nach oben