DOM und BOM
Das DOM und BOM sind Modelle, welche als Schnittstelle genutzt werden können, um auf das Dokument und den Browser zuzugreifen.
Das DOM (Document Object Model) erlaubt mittels einer Skript- oder Programmiersprache (z. B. JavaScript) den
Zugriff auf das Dokument (z. B. HTML-Dokument). Das DOM kann als Schnittstelle angesehen werden, welches auf die HTML-Elemente
(welche in JS als Objekte vorliegen) zugreifen kann und somit Elemente hinzufügen, verändern und sogar löschen kann.
Diese Änderung gilt dabei immer nur für die aktuelle Sitzung, wird nicht gespeichert und geht somit beim Wechseln auf eine
andere Seite verloren. Um auf das DOM zuzugreifen, benötigen wir das Objekt document. Bisher haben wir aus diesem
Objekt immer nur die Funktion write() verwendet. Diese werden wir jedoch in Zukunft (mal abgesehen von Testskripten)
eigentlich kaum mehr verwenden (evtl. nur noch in Verbindung mit einem PopUp-Fenster).
Das BOM (Browser Object Model) ist ein Modell zum Zugriff auf den Browser. Das BOM wird durch das Objekt
window gekennzeichnet. Dieses Objekt besitzt unter anderem das Unterobjekt location (dazu später
mehr). Auch document
ist ein Unterobjekt von window, somit kann das DOM als Bestandteil des BOMs angesehen werden. Auf einige Eigenschaften
und Funktionen des BOMs gehen wir in den Themen Event-Handling, Fenstersteuerung
und Zeitsteuerung ein.
Übrigens: Die Funktionen alert(), confirm() und prompt() sind Funktionen des
window-Objekts und können somit auch über window.alert(), window.confirm() und
window.prompt() aufgerufen werden. Da window das Wurzelelement ist, kann es jedoch bei der Angabe
weggelassen werden. Die Funktionen parseInt(), parseFloat() und isNaN() sind hingegen
objektlose Funktionen. Ein Aufruf wie window.parseInt() wäre falsch, auch wenn dieser vermutlich in den meisten
Browsern fehlerfrei ausgeführt werden würde.
Elemente auswählen
Um Elemente von einem HTML-Dokument auszuwählen, gibt es 4 Funktionen: getElementById(), getElementsByClassName(),
getElementsByName() und getElementsByTagName(). getElementById() gibt dabei das Element mit
der angegeben ID (id-Attribut im HTML-Code) zurück. Alle 3 anderen Funktionen geben ein Objekt vom Typ
NodeList zurück. Dabei handelt es sich um eine Art von Array. Der Zugriff kann ebenfalls über den Index und die
eckigen Klammern erfolgen. Die Länge kann auch hier ebenfalls mit der length-Eigenschaft abgerufen werden. Mittels
der Funktion getElementsByClassName() lassen sich alle Elemente selektieren, die den angegebenen Klassennamen
haben. getElementsByName() selektiert alle Elemente mit dem angegebenen Namen als Wert des name-Attributs.
getElementsByTagName() selektiert Elemente an Hand des Element- bzw. Tag-Namens. So selektiert getElementsByTagName("p")
alle Paragraphen-Elemente.
Die mit Hilfe der 4 genannten Methoden selektierten Elemente liegen in JavaScript als Node-Objekt vor. Dieses
Node-Objekt kann nun mittels Funktionen und Eigenschaften verändert werden. Den (HTML-)Inhalt eines Elements können wir
mittels der Eigenschaft innerHTML abrufen oder verändern. Weitere Attribute können mittels dem Syntax element.attributName = attributWert
oder über die Funktion setAttribute() (z. B. element.setAttribute(attributName, attributWert)) geändert
werden.
<h1 id="titel"></h1> <img src="/Bilder/Logo/Logo.jpg" width="100" alt="Logo" id="bild" />
document.getElementById("titel").innerHTML = "Homepage-Webhilfe";
document.getElementById("bild").title = "Das Logo von Homepage-Webhilfe!";
Wir können mittels des Node-Objekts auch auf dessen Unterelemente zugreifen. Hierfür dient die Eigenschaft childNodes,
welche ein NodeList-Objekt zurückgibt. Über die Funktionen appendChild() und removeChild() können
wir unserem Element weitere Unterelemente hinzufügen oder ein Unterelement entfernen.
Style-Eigenschaften
Auf Style-Eigenschaften eines einzelnen Elements können wir ebenfalls mittels des Node-Objekts zugreifen. Hierfür müssen wir uns
in das Objekt CSSStyleDeclaration begeben, welches sich hinter der Eigenschaft style des Node-Objekts
befindet. Die Eigenschaften des CSSStyleDeclaration-Objekts, um CSS-Eigenschaften abzurufen und zu ändern, haben den gleichen Namen
wie in CSS. Die Schreibweise erfolgt dabei jedoch immer ohne Bindestriche, sondern mit einer Abwandlung der „Camel Case“-Schreibweise. Ein Zugriff
auf die CSS-Eigenschaft margin-top kann in JavaScript mittels der Eigenschaft marginTop erfolgen. Die Eigenschaft
border-right-style wird hiermit zu borderRightStyle. Die Eigenschaft color verändert sich hingegen
vom Namen nicht.
<div id="rechteck" style="width: 200px; height: 200px; background-color: red;"></div>
document.getElementById("rechteck").style.backgroundColor = "lime";
Formulare
Formulare bzw. deren Elemente können an Stelle mit der Funktion getElementsByName() auch über eine einfachere Variante angesprochen
werden. Hierzu nutzen wir das Unterobjekt forms des document-Objekts. Nun können wir unser Formular entweder mittels
eines Index (document.forms[0], document.forms[1], ...) oder über den Namen (document.forms.meinFormular1,
document.forms.meinFormular2) ansprechen. Auf Unterelemente des Formulars können wir nun ebenfalls mit Hilfe des Namens
(name-Attribut) zugreifen. In den Elementen selbst stehen uns nun weitere Eigenschaften je nach Typ zur Verfügung: z. B.
value (eingegebener oder aktueller Wert bzw. Wert des value-Attributs), checked (für Kontrollkästchen:
true bedeutet Häkchen ist gesetzt), disabled (entspricht dem disabled-Attribut, true bedeutet
Feld ist deaktiviert), selectedIndex (für Auswahllisten: Index der ausgewählten Eigenschaft von den Optionen oder -1) und
options (für Auswahllisten: Liste mit allen Optionen der Auswahlliste).
<form name="formular">
Jahr: <input type="number" min="2000" name="jahr" />
</form>
document.forms.formular.jahr.value = (new Date()).getFullYear();