Rheinwerk Computing < openbook > Rheinwerk 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
Rheinwerk 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


Rheinwerk 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 Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern