Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 17 DHTML und CSS
  gp 17.1 Grundlagen
  gp 17.2 Cascading Style Sheets
  gp 17.3 HTML-Elemente
  gp 17.4 Beispiele
    gp 17.4.1 Animiertes Logo
    gp 17.4.2 Sichtbar und unsichtbar
    gp 17.4.3 Neuer Mauszeiger
    gp 17.4.4 Permanentes Werbebanner


Galileo Computing

17.3 HTML-Elemente  toptop

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.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 17.2     Der neue Text und das neue Element erscheinen.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de