DOM-Manipulation

Wie ich bereits in Meta-Tags erwähnt habe, handelt es sich dabei um eine nicht ganz einfache DOM- (Objekt-) Hirachie, mit einer Menge von Eigenschaften und Methoden. Ich möchte hier nur einige wenige Möglichkeiten vorstellen, Objekte und deren Eigenschaften in Ihrem HTML-Dokument zu manipulieren.

Ich verwende dazu immer die bereits beschriebene Methode TAGs direkt durch Ihren ID-Namen anzusprechen. Das bedeutet aber auch, dass Sie allen TAGs in Ihrem Dokument, welche Sie in irgendeiner Weise manipulieren möchten, eine ID mitgeben müssen. Ansprechen können Sie diese TAGs dann wie folgt.

document.getElementById("IDNAME")
Eigenschaften des Objektes werden hinten mit Punkt getrennt angehangen.

Style-Eigenschaften

Beispielhaft haben Sie es bereits kennengelernt. Dem Objekt Ihrer Wahl hängen Sie ".style" an, gefolgt von der jeweiligen CSS-Eigenschaft, welche Sie ansprechen möchten. Allerdings werden bei CSS-Eigenschaften, deren Name ein Bindestrich "-" enthält, dieser weggelassen, und stattdessen der nachfolgende Buchstabe groß geschrieben. Beispiele.

document.getElementById('xy').style.color
document.getElementById('xy').style.backgroundColor

Hintergrundfarbe im CSS lautet "background-color" und wird für JS zu "backgroundColor".

Formular-Felder

document.getElementById('xy').value
Inhalt eines Formular-Elements.

document.getElementById('xy').checked
Zustand einer Checkbox, "true" bedeutet an, und "false bedeutet aus.

document.getElementById('xy').selectedIndex
Bestimmt bei einer Auswahlbox <select>, welche Option <option> ausgewählt wurde. Allerdings nur als Zahl, und zwar in der Reihenfolge wie die Optionen im HTML angegeben wurden, angefangen mit 0. Bei "-1" wurde nichts ausgewählt.

document.getElementById('xy').option[z].value
Um den Wert "value" einer Option <option> einer Auswahlbox <select> zu erhalten, muss vorher erst mit "option" bestimmt werden, von welchem Index "z" als Zahl. Angefangen mit 0 gilt die Reihenfolge wie in Ihrem HTML.

Inhalt von HTML-Objekten

Sie können den Inhalt auf den sich ein TAG bezieht ändern. Und zwar nicht einfach nur Text, sondern richtigen HTML-Code.

document.getElementById('xy').innerHTML

Vom Lesen und Schreiben

Die oben beschriebenen Eigenschaften können zum Lesen und ändern gleichzeitig benutzt werden.

Text = document.getElementById('xy').value;
Hier zum Beispiel erhält die Variabel "Text" den Inhalt eines Formularfeldes.

document.getElementById('xy').value = "Text";
Hier erhält das gleiche Formularfeld den Inhalt "Text" zugewiesen. Bei einem Textfeld würden Sie dies dann auch im Dokument sehen.