17.3 HTML-Elemente 
Der Begriff DOM ist Ihnen ja bereits im vorherigen Kapitel begegnet: Document Object Model, die hierarchische Anordnung der einzelnen HTML-Dokumente im document-Objekt. Alles, was in Tags eingeschlossen ist, ist ein Objekt, also beispielsweise auch kursiv gedruckter Text (<i>-Tag). Auf jedes dieser Objekte kann man zugreifen, und jedes dieser Objekte hat eine Menge von Eigenschaften.
Prinzipiell genügt es, wenn man jedem Tag, auf das man mit JavaScript/DHTML zugreifen will, einen Identifikator gibt. Dazu verwenden Sie das id-Attribut:
<p id="Galileo">Galileo Press</p>
Ansonsten gibt es noch zwei Formen von Blöcken: <span> für ein Stück HTML oder Text ohne Umbruch davor und dahinter und <div> für HTML oder Text inklusive Umbruch davor und dahinter.
<div id="div1">
<!-- HTML-Kommandos etc. -->
</div>
Auch dem <div>- oder <span>-Tag kann man ein style-Attribut mitgeben, um beispielsweise den Inhalt des Blocks zu verstecken oder zu bewegen.
Alle Elemente einer HTML-Seite sind seit dem Internet Explorer 4 in document.all gespeichert. Über den Identifikator kann man dann auf ein Element zugreifen, um – und das ist das eigentlich Interessante – über die style-Eigenschaft des Elements Zugriff auf das Aussehen des Elements zu haben.
Mit dem folgenden Code macht man beispielsweise den Layer "div1" aus dem obigen Beispiel unsichtbar:
document.all.div1.style.visibility = "hidden";
Doch wieso haben wir im vorherigen Kapitel extra getElementById() und getElementsByTagName() eingeführt? Nun, document.all war ein Microsoft-Alleingang in der Browser-Version 4; seit der Browser-Version 5 gibt es auch im Internet Explorer die DOM-Methoden. Deswegen dient document.all nur noch der Browserunterscheidung, denn einige kleinere Unterschiede zwischen den Browsern gibt es weiterhin. Verwendet wird in allen Browsern getElementById().
Im folgenden Abschnitt sehen Sie zahlreiche Beispiele, die den Einsatz dieser Techniken demonstrieren. Davor aber noch ein praktischer Hinweis. Häufig geht es bei DHTML »lediglich« darum, Text in einem Textfeld auszugeben, oder darum, ganz allgemein irgendwo auf der Seite HTML-Code zu platzieren. An dieser Stelle kommt die JavaScript-Eigenschaft innerHTML ins Spiel, die genau das macht: HTML innerhalb eines Elements zu verändern.
Das folgende Listing demonstriert das an zwei Beispielen: per innerHTML wird sowohl ein Element einer Aufzählungsliste als auch Text innerhalb eines Absatzes erstellt:
<html>
<head>
<title>CSS</title>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("Absatz").innerHTML =
"Neuer Text";
document.getElementById("Liste").innerHTML =
"<li>Neues Element</li>";
}
//--></script>
</head>
<body>
<p id="Absatz">Alter Text</p>
<ul id="Liste">
<li>Altes Element</li>
</ul>
</body>
</html>
In Abbildung 17.2 sehen Sie das Ergebnis: Die neuen Elemente und Texte erscheinen und überschreiben die alten.
Hier klicken, um das Bild zu Vergrößern
Abbildung 17.2 Der neue Text und das neue Element erscheinen.
|
