Das Document Object Model

Ein Webseiten-Entwickler muß den Aufbau seiner Seite visualisieren können.
Eine HTML-Seite hat z.B. einen Aufbau entsprechend der folgenden Skizze:
Aufbau-HTML-Seite.png
Die erkennbare Struktur der oben abgebildeten Seite läßt sich auch auf andere Arten darstellen. Sie erkennen bereits in der gegebenen Abbildung, dass die Elemente der Seite ineinander geschachtelt sind. Zu jedem öffnenden HTML-Tag schreibt daher ein guter Programmierer immer sofort im nächsten Schritt das schließende Tag in seinen Quelltext. Die Gefahr ist ansonsten groß, das dieses vergessen wird. Die möglicherweise ansonsten entstehenden Fehler sind in umfangreichen Quelltexten schwer zu finden. Eine Skizze wie die obige hilft, die eigenen Ideen schnell festzuhalten für die anschließende Realisierung.

Die wichtigsten Merkmale des DOM (document object model)

Sie kennen bereits die Anweisung document.write("text"). Hier wird bereits das DOM genutzt, um Text in die Seite zu schreiben. Denn document bezeichnet die ganze Seite! Über diesen so genannten obersten Knoten kann man auf alle darin enthaltenen Elemente und deren Eigenschaften zugreifen:
  • Alle Elemente der Webseite sind im DOM hierarchisch geordnet.
  • Man kann auf alle Elemente und deren Eigenschaften auch über Javascript zugreifen.
Bitte überfliegen Sie die folgenden Quellen nur grob, denn uns interessiert mehr die praktische Anwendung in der Programmierung!
Das DOM ausführlich finden Sie hier:

Beispiele für die hierarchische Struktur der HTML-Elemente

  • Grundaufbau der Seite
    • Das html-Tag enthält head- und body-Tag. title- und meta-Tag finden sich wiederum nur im head-Tag.
  • Das table-Tag
    • Das table-Tag beschreibt eine Tabelle. Zu diesem Zweck wird zusätzlich ein tr-Tag benötigt, welches immer nur innerhalb des table-Tags genutzt wird - ohne dieses ist es nutzlos. Innerhalb des tr-Tags befinden sich die td-Tags, welche entsprechend der anzuzeigenden Spalten verwendet werden. Und innerhalb der td-Tags findet man den anzuzeigenden Text als eine Eigenschaft des td-Tags.

Beispiele für die einfache Formatierung von Text vor der Ausgabe - fett, blinkend, ...

siehe:

Beispiele für direkte Zugriffe auf Elemente der angezeigten Seite und deren Eigenschaften

In den folgenden Beispielen wird in Ihrer Seite die Existenz eines HTML-Elements mit einem Identifier "id1" vorausgesetzt. Dieses Element könnte z.B. das in der obigen Abbildung gezeigte Textfeld sein. Das Textfeld können Sie mit einem div-Tag realisieren und das öffnende div-Tag mit der Eigenschaft id="id1" kennzeichnen.
Der Zugriff auf die Eigenschaften eines Elements findet immer über das Element statt. Zu diesem Zweck muss man es erst einmal finden. Das Finden des Elements funktioniert so:
var obj=document.getElementById("id1");
In der Variable obj haben wir uns jetzt sozusagen einen Zeiger auf das Element mit der id="id1" gespeichert. Mit diesem "Objekt" können wir auch weiter arbeiten. Probieren Sie die folgenden Beispiele in Ihren aktuellen Aufgaben aus!

Text ändern - innerHTML

Zugriff auf die Objekt-Eigenschaft über den Inhalt der Variable 'obj' (Zeiger auf das Objekt):
obj.innerHTML = 'irgendein Text';
oder alternativ mit direktem Zugriff auf die Objekt-Eigenschaft ohne Variable:
document.getElementById("id1").innerHTML = 'irgendein Text';

Textfarbe ändern - style.color

document.getElementById("id1").style.color = 'orange';
siehe auch: http://www.w3schools.com/js/js_htmldom_css.asp

Hintergrundfarbe ändern - style.backgroundColor

document.getElementById("id1").style.backgroundColor = 'green';

Transparenz ändern - style.opacity

document.getElementById("id1").style.opacity = 0.5;

Abstand oben ändern - style.top

document.getElementById("id1").style.top = '350px';
Ggf. muss für das Element in CSS noch die Eigenschaft position:absolute gesetzt sein.
Das gleiche geht auch mit left usw.
siehe auch:
http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript

Textdarstellung ändern - style.fontWeight

siehe:
http://www.w3schools.com/jsref/prop_style_fontweight.asp

Weitere Infos zum Ändern von Elementeigenschaften finden Sie hier:


Visualisierung von Webseiten mit Toolunterstützung

Ein Firefox-Browser Add-On schafft es, Ihre Seite in 3D abzubilden:
Tilt3D.png