|
document
Das document-Objekt repräsentiert das
HTML-Dokument im aktuellen Browserfenster. Damit könnt Ihr
beispielsweise per JavaScript HTML-Code ergänzen. Dazu dienen die
Funktionen write() und
writeln()
<p>Vor dem write</p>
<script type="text/javascript">
<!--
var name = window.prompt("Gib bitte Deinen Namen ein");
document.open(); // öffne das Dokument
// gebe den eingegebenen Namen aus
document.write("<p>Hallo, " + name + "</p>");
document.close(); // schließe das Dokument
//-->
</script>
<p>Nach dem write</p>
Bevor Ihr in das Dokument schreiben könnt, müßt Ihr das
Dokument mit open() öffnen. Wenn das aktuelle
Dokument noch geladen wird, wird es ergänzt; der Teil vorher und
nachher bleibt also erhalten. Wenn jedoch das aktuelle Dokument bereits
fertig geladen ist, löscht open() den Inhalt des aktuellen Dokuments, so
daß ein folgendes write() auf eine leere, weiße Seite schreibt.
Nach dem Schreiben wird das Dokument mit der Funktion
close() wieder geschlossen. writeln() tut dasselbe wie write(),
hängt aber zusätzlich noch einen Zeilenumbruch an.
Meist wird das document-Objekt dazu verwendet, auf bestehende HTML-Elemente
zuzugreifen und deren Eigenschaften zu ändern. Das wird beispielsweise
bei den verbreiteten RollOver-Effekten genutzt:
Wenn der Mauszeiger beispielsweise über ein Bild fährt, leuchtet
dieses auf. Dazu bereitet Ihr zwei Bilder vor, das «normale» und
das «leuchtende». Zum Umschalten ändert Ihr einfach den
Inhalt des src-Attributs des img-Tags. Dazu müßt Ihr jedoch auf
das img-Element zugreifen, und genau da beginnt das Problem: Das funktioniert
nicht bei jedem Browser auf die gleiche Weise.
DOM, aber keine Kirche
Die neueren Version des Internet Explorers (ab 5.0) und von Netscape (ab 6.0)
halten sich an die offiziellen Standards des W3C und haben das
DOM implementiert. DOM steht für
Document Object Model. Dabei werden die
HTML-Elemente in einem Baum organisiert
<html>
<head></head>
<body bgcolor="darkgray">
<p>
Der erste Absatz
</p>
<p>
Der zweite Absatz
<img src="bild.jpg">
noch mehr Text
</p>
</body>
</html>
|
Das links gezeigte HTML-Beispiel als DOM-Tree
|
Jedes HTML-Element wird in diesem Baum als Knoten
dargestellt. Auch der Text in einem HTML-Element und die Attribute eines
Elements sind eigene Knoten, im Beispiel dargestellt als Rechtecke bzw. als
Rauten. Beim Umgang mit Bäumen (zumindest dieser Spielart) sind drei
Begriffe wichtig, die Ihr auch für den Umgang mit dem DOM kennen
solltet
- Wurzel (engl. root)
-
Im Gegensatz zu den Bäumen im Wald hat diese Art von Bäumen
die Wurzel oben. Die Wurzel ist der einzige Knoten, der keinen
Elternknoten hat. In unserem Beispiel ist der 'html'-Knoten die Wurzel.
- Kind (engl. child)
-
Jeder Knoten in einem Baum kann einen oder mehrere Kindsknoten haben.
Beispielsweise ist 'body' ein Kind von 'html', und der Attributsknoten
'bgcolor=darkgray' ist ein Kind von 'body'.
- Eltern (engl. parent)
-
Umgekehrt hat jeder Knoten (außer der Wurzel) genau einen
Elternknoten. Der Elternknoten des Textknotens 'Der erste Absatz' ist
beispielsweise der erste 'p'-Knoten.
Es ist im ersten Moment etwas ungewohnt, in solchen Begriffen zu denken,
aber es hat (nicht nur beim DOM) viele Vorteile.
Von Knoten und IDs
Die Knoten im DOM-Baum sind Objekte der Klasse
node. Diese Objekte haben Eigenschaften wie
childNodes (ein Array mit allen Kindsknoten dieses Knotens) oder
nextSilbling (der nächste Kindsknoten
desselben Elterknotens) und Funktionen wie
appendChild() (hängt einen neuen Kindsknoten an diesen Knoten
als Elternknoten) oder hasChildNodes()
(prüft, ob dieser Knoten Kindsknoten hat). Damit könnt Ihr Euch im
Baum bewegen und ihn bearbeiten. Als Beispiel nehmen wir ein p-Element,
das auf Klick seinen Inhalt ändert
<script type="text/javascript">
<!--
function changeIt()
{
// greife auf das Element mit dieser ID zu
var element = document.getElementById('der_text');
// das erste Kind dieses Elements (der Textknoten)
var text = element.firstChild;
// ändere den Inhalt des Textknotens
// -> den Text im Element mit der ID 'der_text'
text.data = "geaendert!";
}
//-->
</script>
...
<p id="der_text" onClick="changeIt()">
Klick mich!
</p>
Für den ersten Zugriff auf den Knoten wird in diesem Beispiel die
Funktion getElementById() des document-Objekts
benutzt. Die Funktion liefert den Knoten, der die übergebene ID im
Attribut 'id' trägt. In unserem Fall ist das das p-Element. Der Text
innerhalb des p-Elements steht im ersten Kindsknoten davon, dem Textknoten.
Den wiederum können wir ändern. Wie das in der Praxis aussieht,
könnt Ihr ausprobieren (allerdings, wie gesagt, nur in Browsern, die
das DOM verstehen):
Klick mich!
Die Attribute eines HTML-Elements könnt Ihr sogar noch einfacher
bekommen: Sie sind Eigenschaften des Elements
// Ändern des src-Attributs eines img-Tags
document.getElementById('bild').src = "neues_bild.jpg";
// Ändern des href-Attributs eines a-Tags
document.getElementById('link').href = "http://www.splashcomics.de";
Ein Attribut ist nicht nur eine Eigenschaft des Elements, sondern ein
eigenes Unterobjekt: Das style-Attribut. Darüber könnt Ihr auch
CSS-Attribute setzen
// Ändere die Textfarbe auf rot
document.getElementById('text').style.color = "red";
// Ändere die Hintergrundfarbe
document.getElementById('text').style.backgroundColor = "darkblue";
Dabei müßt Ihr nur auf eines achten, was auch schon im obigen
Beispiel zu sehen ist: Enthält der Name der CSS-Eigenschaft einen
Bindestrich, müßt Ihr den Namen etwas umschreiben. Aus
'background-color' wird 'backgroundColor', aus 'border-style' wird
'borderStyle', und so weiter.
Damit habt Ihr bereits alles für einen Rollover-Effekt beisammen
<script type="text/javascript">
<!--
function enlight(id)
{
// erzeuge den Dateinamen des "leuchtenden" Bildes
var filename = id + "-enlighted.jpg";
// ändere src-Attribut
document.getElementById(id).src = filename;
}
function delight(id)
{
// erzeuge den Dateinamen des "normalen" Bildes
var filename = id + "-normal.jpg";
// ändere src-Attribut
document.getElementById(id).src = filename;
}
//-->
</script>
...
<img src="01-normal.jpg" onMouseOver="enlight('01')"
onMouseOut="delight('01')">
<img src="02-normal.jpg" onMouseOver="enlight('02')"
onMouseOut="delight('02')">
<img src="03-normal.jpg" onMouseOver="enlight('03')"
onMouseOut="delight('03')">
Für die Elemente eines Formulars gibt es noch eine andere
Zugriffsmöglichkeit, und zwar über die name-Attribute. Wie das
geht, zeigt dieses Beispiel
<form name="das_formular">
<input type="text" name="erster">
<input type="text" name="zweiter">
</form>
Dann könnt Ihr beispielsweise einfach den Inhalt des einen Textfeldes
in das andere kopieren
document.das_formular.zweiter.value =
document.das_formular.erster.value;
Das form-Element kennt außerdem zwei sehr praktische Methoden:
submit() und reset().
Diese beiden Funktionen haben die gleiche Wirkung wie ein Submit- bzw. ein
Reset-Button im Formular. Damit könnt Ihr zum einen die vorgegebenen
Buttons durch eigene Links ersetzen
<a href="javascript:das_formular.submit()"><img src="submit.jpg"></a>
zum anderen könnt Ihr vor dem Abschicken die Eingaben prüfen
<a href="javascript:pruefen()"><img src="submit.jpg"></a>
...
// die JavaScript-Funktion
function pruefen()
{
var ok = 0; // Variable zum "Merken" von Fehlern
var form = document.das_formular; // das Formular
if (form.name.value == "") // ist im Feld 'name' etwas eingetragen
ok = 1;
// enthält die E-Mail-Adresse ein '@'
if (form.email.value.indexOf('@') == -1)
ok = 1;
if (ok == 0) // kein Fehler
form.submit(); // Daten wegschicken
else
window.alert("Eingaben unvollständig");
} |
