SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
 |
HTML-Elementobjekte |
|
Elementobjekte |
 | |
Der HTML-Variante des Document Object Models (DOM) zufolge stellt jedes HTML-Element in einer HTML-Datei ein Objekt dar. Wichtig ist dabei zu wissen, wie mit einer Scriptsprache wie JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann. Nach Syntax der HTML-Variante des DOM kann nur auf solche HTML-Elemente zugegriffen werden, die in ihrem einleitenden Tag entweder ein name-Attribut oder ein id-Attribut enthalten. Nach dem erweiterten XML-DOM lässt sich jedoch auch auf jedes beliebige HTML-Element zugreifen, auch wenn dieses kein name- oder id-Attribut hat.
Das name-Attribut ist in HTML nur bei bestimmten Elementen erlaubt, etwa bei Formularelementen. Deshalb ist diese Zugriffsmethode auch nur bei den folgenden Elementen möglich, da diese ein name-Attribut erlauben:
| a |
applet |
form |
frame |
img |
input |
iframe |
| map |
meta |
object |
param |
select |
textarea |
Mit der Methode 
document.getElementsByName() können Sie HTML-Elemente ansprechen, die ein name-Attribut haben.
Das id-Attribut ist im Gegensatz zum name-Attribut in fast allen HTML-Elementen erlaubt. Außerdem sollte seine Wertzuweisung ein dokumentweit eindeutiger Name für das Element sein. Dadurch eignet sich diese Zugriffsmethode in den meisten Fällen in der Praxis besser als die über das name-Attribut.
Mit der Methode document.getElementById() können Sie HTML-Elemente ansprechen, die ein id-Attribut haben.
Wenn Sie auf HTML-Elemente zugreifen möchten, bei denen weder ein name-Attribut noch ein id-Attribut notiert ist, steht Ihnen ein dritter Weg offen: der Zugriff über den Elementbaum. Dabei können sie dann beispielsweise auf die "dritte Tabellenzelle in der zweiten Tabellenreihe der vierten Tabelle im Dokument" zugreifen.
Mit der Methode document.getElementsByTagName() sind solche Zugriffe möglich.
Jedes HTML-Element hat Eigenschaften. Und zwar stellt jedes erlaubte Attribut eines HTML-Elements eine DOM-Eigenschaft dieses Elements dar. So hat beispielsweise das HTML-Element input ein erlaubtes Atrribut value=, und das HTML-Element h1 hat ein erlaubtes Attribut align=. Im DOM gibt es demnach also ein input-Elementobjekt mit der Eigenschaft value, und ein h1-Elementobjekt mit der Eigenschaft align.
Darüber hinaus definiert das DOM für einige der HTML-Elemente auch Methoden. So kann gibt es für das form-Elementobjekt (also das DOM-Objekt des HTML-Elements form) die Methoden submit() (Formular absenden) und reset() (Formulareingaben verwerfen).
Für alle Eigenschaften und Methoden von HTML-Elementobjekten gelten die zuvor genannten drei Zugriffsmethoden. Wenn Sie beispielsweise folgendes HTML-Element haben:
<h1 id="Seitenkopfueberschrift" align="center">Text</h1>
Dann können Sie mit document.getElementById() auf das Element zugreifen und die Objekteigenschaft align abfragen oder ändern - z.B.:
alert(document.getElementById('Seitenkopfueberschrift').align)
Diese JavaScript-Anweisung gibt ein Meldungsfenster aus, in dem center steht, weil document.getElementById("Seitenkopfueberschrift").align auf die Eigenschaft align des Elementobjekts mit der Id Seitenkopfueberschrift zugreift.
Auf dieser Seite werden für alle HTML-Elemente die vom DOM erlaubten Eigenschaften und Methoden beschrieben. Die Eigenschaften ergeben sich dabei zwangsläufig aus den erlaubten Attributen der HTML-Elemente gemäß HTML 4.0. Die Methoden werden dagegen nur vom DOM festgelegt.
Jedes HTML-Element stellt gemäß dem DOM außerdem einen Knoten im Elementbaum dar. Deshalb gelten für jedes HTML-Element auch alle Eigenschaften und Methoden des node-Objekts.
Beachten Sie unbedingt die Groß-Kleinschreibung der Eigenschaften und Methoden, die in diesem Abschnitt zu den einzelnen HTML-Elementobjekten aufgelistet sind. Fehler bei der Groß-Kleinschreibung führen zu Fehlern in JavaScript.
Da Opera 5.12 das Document Object Model nur sehr unvollständig implementiert hat, wird in diesem Dokument jeweils darauf hingewiesen, welche Beispiele auch von diesem Browser interpretiert werden.
 |
UniversaleigenschaftenUniversaleigenschaften entsprechen den Universalattributen von HTML. Diese Eigenschaften gelten für fast jedes HTML-Element.
| |||||||||||||||||||||
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<p id="p_italiano" lang="it"
onClick=" alert(document.getElementById('p_italiano').lang)">io senza te</p>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit einer id="p_italiano". Gleichzeitig enthält der Textabsatz einen Event-Handler onClick. Beim Anklicken des Textes gibt ein Meldungsfenster aus, um welche Sprache es sich bei dem Text handelt - ausgegeben wird die Wertzuweisung des Attributs lang, also der Wert it.
Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.
|
|
a (HTML-Elementobjekt)HTML-Referenz: siehe Element: a
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <a>...</a> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
| ||||||||||||||||||||||||||||||||||||||||||||||||
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<link rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
<!--
function AndererLink() {
document.getElementById("selfhtml_link").href = "http://selfaktuell.teamone.de/";
document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML aktuell";
}
//-->
</script>
</head><body>
<a id="selfhtml_link" href="http://selfhtml.teamone.de/">SELFHTML</a><br>
<a href="javascript:AndererLink()">anderer Link!</a>
</body></html>
|
Die Beispieldatei enthält zwei Verweise. Der erste Verweis führt auf eine Adresse im Netz, der zweite ruft die JavaScript- Funktion AndererLink() auf, die im Dateikopf notiert ist. Diese Funktion weist der Elementeigenschaft href einen neuen Wert zu, nämlich eine andere Internetadresse. Mit getElementById("selfhtml_link") wird dabei auf den Verweis zugegriffen, der mit id="selfhtml_link" ausgezeichnet ist. Außerdem ändert die Funktion AndererLink() auch noch dynamisch den Verweistext. Auch dafür wird die DOM-Syntax verwendet, nämlich durch Zuweisung eines neuen Textes an node.nodeValue (firstChild ist bezeichnet den ersten Kindknoten eines Knotens).
|
|
abbr (HTML-Elementobjekt)HTML-Referenz: siehe Element: abbr
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <abbr>...</abbr> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-weight:normal }
.fett { font-weight:bold }
-->
</style>
<script type="text/javascript">
<!--
function wechseln() {
if(document.getElementById("abk").className == "normal")
document.getElementById("abk").className = "fett";
else
document.getElementById("abk").className = "normal";
}
//-->
</script>
</head><body>
<p>Das ist eine <abbr id="abk" class="normal" onMouseOver="wechseln()" onMouseOut="wechseln()">Abk.</abbr></p>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit der Abkürzung Abk., die mit <abbr>...</abbr> ausgezeichnet ist. Das einleitende Tag enthält eine CSS-Klassenangabe, eine eindeutige Id-Angabe und die Event-Handler onMouseOver und onMouseOut, die jeweils die JavaScript- Funktion wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt ab, ob der zugewiesene Klassenname normal lautet. Wenn ja, wird er auf fett geändert, wenn nein, wird er auf normal geändert. Dadurch ergibt sich der Effekt, dass beim Überfahren der Abkürzung mit der Maus der Text der Abkürzung fett dargestellt wird, ansonsten normal.
Beim Internet Explorer war das Beispiel mit dem abbr-Element außer unter dem Internet Explorer 5.0 der Macintosh Edition nicht nachvollziehbar, mit anderen Elementen dagegen schon.
|
|
acronym (HTML-Elementobjekt)HTML-Referenz: siehe Element: acronym
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <acronym>...</acronym> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head><body>
<p>Das ist ein <acronym id="acr" onMouseOver="document.getElementById('acr').title='Acronym'">Acr.</acronym></p>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit dem Akronym Acr., das mit <acronym>...</acronym> ausgezeichnet ist. Das einleitende Tag enthält eine eine eindeutige Id-Angabe und den Event-Handler onMouseOver. Beim Überfahren des Elementtextes mit der Maus wird dadurch dynamisch ein title-Attribut gesetzt, das aussagt, was die Abkürzung Acr. bedeutet.
Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.
|
|
address (HTML-Elementobjekt)HTML-Referenz: siehe Element: address
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <address>...</address> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Namen() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'Stefan Münz';
}
function Text() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'SELFHTML-Redaktion';
}
//-->
</script>
</head><body>
<div>Dies alles ist von der
<address onMouseOver="Namen()" onMouseOut="Text()">SELFHTML-Redaktion</address><div>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit der Adressbezeichnung SELFHTML-Redaktion, die mit <address>...</address> ausgezeichnet ist. Das einleitende Tag enthält die Event-Handler onMouseOver und onMouseOut, die jeweils eine JavaScript- Funktion aufrufen. Die Funktion Namen(), die bei onMouseOver aufgerufen wird, ersetzt den Inhalt SELFHTML-Redaktion durch den Wert Stefan Münz. Die Funktion Text() stellt dagegen den Originalzustand wieder her und wird bei onMouseOut aufgerufen. Beide Funktionen greifen mit getElementsByTagName("address")[0] auf das erste address-Element im Dokument zu. Der jeweils neue Textinhalt des Elements wird mit node.nodeValue gesetzt (firstChild bezeichnet den ersten Kindknoten eines Knotens).
|
|
applet (HTML-Elementobjekt)HTML-Referenz: siehe Element: applet
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <applet>...</applet> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
<param name="msg" value="Die Energie des Verstehens">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</applet>
<form name="Form" action="">
<input type="button" value="40" onClick="document.getElementById('Ticker').height=40">
<input type="button" value="60" onClick="document.getElementById('Ticker').height=60">
</form>
</body></html>
|
Das Beispiel enthält ein eingebundenes Java-Applet für einen Lauftext (Ticker). Unterhalb des Applets ist ein Formular mit einem Eingabefeld notiert. Klickt der Anwender auf die Buttons, wird dynamisch die Anzeigehöhe des Java-Applets geändert, und der Lauftext ändert dabei automatisch seine Größe (sofern das Applet so programmiert ist, dass die Größe des Lauftextes von dem Attribut height= im einleitenden <applet>-Tag abhängig ist). Mit document.getElementById('Ticker') wird auf das Applet zugegriffen, da es im einleitenden Tag das Attribut id="Ticker" hat. Geändert wird sein Attribut height.
Der Netscape 6.1 interpretiert dieses Beispiel nicht.
|
|
area (HTML-Elementobjekt)HTML-Referenz: siehe Element: area
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <area> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function plus100() {
document.getElementById("Verweis").coords = "101,101,349,149";
}
//-->
</script>
</head><body>
<map name="Testbild">
<area id="Verweis" shape="rect" coords="1,1,249,49"
href="javascript:plus100()" title="Koordinaten" alt="Koordinaten">
</map>
<img src="hypgraf.gif" width="400" height="400"
usemap="#Testbild" alt="verweis-sensitive Grafik">
</body></html>
|
Das Beispiel enthält eine Grafik, die auf einen map-Bereich verweist, in dem ein verweis-sensitiver Bereich für die Grafik notiert wird. Beim Anklicken dieses verweis-sensitiven Bereichs wird die JavaScript- Funktion plus100() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ändert dynamisch die Eigenschaft coords, indem sie ihr neue Werte zuweist. Der Effekt ist, dass der verweis-sensitive Bereich anschließend um 100 Pixel weiter nach rechts unten verlagert wird.
Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.
|
|
b (HTML-Elementobjekt)HTML-Referenz: siehe Element: b
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <b>...</b> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
</head><body>
<b id="wichtig">wichtige Aussage!</b><br>
<a href="javascript:document.getElementById('wichtig').id='unwichtig';
alert(document.getElementById('unwichtig').id);">unwichtig machen!</a>
</body></html>
|
Das Beispiel enthält eine mit <b>...</b> formatierte wichtige Aussage, bei der im einleitenden Tag das Attribut id="wichtig" notiert ist. Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken das id-Attribut des b-Elements auf den Wert unwichtig gesetzt wird. Dazu wird mit document.getElementById('wichtig').id auf das Attribut zugegriffen. Anschließend wird mit document.getElementById('unwichtig').id auf den neuen Id-Wert zugegriffen, um den neuen Id-Wert zur Kontrolle in einem Meldungsfenster auszugeben.
Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.
|
|
base (HTML-Elementobjekt)HTML-Referenz: siehe Element: base
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <base> haben als DOM-Objekte für den Scriptsprachenzugriff die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<base target="_self">
<script type="text/javascript">
<!--
function blankBase() {
document.getElementsByTagName("base")[0].target="_blank";
}
//-->
</script>
</head><body>
<a href="news.htm">News</a><br>
<a href="javascript:blankBase()">Links in neues Fenster laden</a>
</body></html>
|
In der Beispieldatei sind zwei Verweise notiert. Der erste ruft einfach eine andere Datei auf. Normalerweise wird das Verweisziel dabei ins gleiche Fenster geladen. Im Dateikopf ist dies mit <base id="Zielfenster" target="_self"> auch explizit bestätigt. Der zweite Verweis ruft bei Anklicken jedoch die JavaScript- Funktion blankBase() auf, die beim base-Element die Eigenschaft target auf den Wert _blank ändert, was bewirkt, dass Verweisziele dieser Datei in ein neues Fenster geladen werden.
Mit Netscape (6.1) und unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem base-Element nicht nachvollziehbar. Opera 5.12 interpretiert das Beispiel dagegen.
Die Verwendung von Universaleigenschaften ist im HTML-4.0-Standard für das base-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementsById() vermeiden.
|
|
basefont (HTML-Elementobjekt)HTML-Referenz: siehe Element: basefont
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <basefont> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function machGross() {
document.getElementById("ab_hier_anders").size="7";
}
//-->
</script>
</head><body>
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<basefont id="ab_hier_anders" color="red" size="">
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<a href="javascript:machGross()">nicht nur rot, sondern auch gross</a>
</body></html>
|
Das Beispiel enthält Text und zwischendrin ein basefont-Element. Am Ende steht ein Verweis, bei dessen Anklicken die JavaScript- Funktion machGross() aufgerufen wird. Mit getElementById("ab_hier_anders") greift diese Funktion auf das basefont-Element zu und ändert dessen Eigenschaft size auf den Wert 7.
Mit Netscape (6.1) war das Beispiel mit dem basefont-Element nicht nachvollziehbar.
|
|
bdo (HTML-Elementobjekt)HTML-Referenz: siehe Element: bdo
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <bdo>...</bdo> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function abc2cba() {
document.getElementsByTagName("bdo")[0].dir="rtl";
}
//-->
</script>
</head><body>
<bdo dir="ltr">ABCDEFGHIJKLMNOPQRSTUVWXYZ</bdo><br>
<a href="javascript:abc2cba()">umkehren!</a>
</body></html>
|
Das Beispiel enthält ein bdo-Element mit dem Attribut dir="ltr" (Schriftrichtung von links nach rechts), das das Alphabet in Großbuchstaben als Inhalt hat. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion abc2cba() aufgerufen. Diese greift mit getElementsByTagName("bdo")[0] auf das erste bdo-Element im Dokument zu und ändert die Schriftrichtung auf rtl, also von rechts nach links. Das Großbuchstabenalphabet wird dadurch umgedreht.
Unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht nachvollziehbar.
|
|
big (HTML-Elementobjekt)HTML-Referenz: siehe Element: big
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <big>...</big> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
<!--
.verybig { font-size:300% }
-->
</style>
<script type="text/javascript">
<!--
function nochmehr() {
document.getElementById("biggie").className = "verybig";
}
//-->
</script>
</head><body>
<p><big id="biggie" onClick="nochmehr()">gross und stark!</big></p>
</body></html>
|
Das Beispiel enthält in einem Textabsatz Text, der mit <big>...</big> ausgezeichnet ist. Im einleitenden <big>-Tag ist der Event-Handler onClick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Funktion nochmehr() aufgerufen. Diese greift mit document.getElementById("biggie") auf das big-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse verybig zu. Der Text wird dadurch auf 300% seiner normalen Größe vergrößert.
|
|
blockquote (HTML-Elementobjekt)HTML-Referenz: siehe Element: blockquote
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <blockquote>...</blockquote> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function showCite() {
alert(document.getElementById('w3zitat').cite);
}
//-->
</script>
</head><body>
<p>Das W3-Konsortium schreibt über das DOM:</p>
<blockquote id="w3zitat"
cite="http://www.w3.org/TR/REC-DOM-Level-1/introduction.html"
onMouseOver="showCite()">
The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents.
</blockquote>
</body></html>
|
Das Beispiel enthält ein mit <blockquote>...</blockquote> ausgezeichnetes Zitat, in dessen einleitendem Tag auch den URI der Quelle mit dem Attribut cite= angegeben ist. Ferner ist dort der Event-Handler onMouseOver notiert, der bewirkt, dass beim Überfahren des Zitats mit der Maus die JavaScript- Funktion showCite() aufgerufen wird. Diese greift mit document.getElementById('w3zitat') auf das blockquote-Element zu und gibt in einem Meldungsfenster den Wert des cite-Attributs aus.
Opera 5.12 gibt in diesem Beispiel undefined zurück.
|
|
body (HTML-Elementobjekt)HTML-Referenz: siehe Element: body
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <body>...</body> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function WerteSetzen() {
document.getElementsByTagName("body")[0].text = document.Formular.Text.value;
document.getElementsByTagName("body")[0].link = document.Formular.Link.value;
document.getElementsByTagName("body")[0].vLink = document.Formular.VLink.value;
document.getElementsByTagName("body")[0].bgColor = document.Formular.BgColor.value;
}
//-->
</script>
</head><body>
<h1>Ein dynamisches Dokument</h1>
<a href="news.htm"><b>Ein Link zu den News</b></a>
<form name="Formular" action="">
<pre>
Textfarbe: <input type="text" size="7" name="Text">
Linkfarbe: <input type="text" size="7" name="Link">
Linkfarbe (besucht): <input type="text" size="7" name="VLink">
Hintergundfarbe: <input type="text" size="7" name="BgColor">
Einstellungen: <input type="button" value="Testen!" onClick="WerteSetzen()">
</pre>
</form>
</body></html>
|
Die Beispieldatei enthält im body-Bereich eine Überschrift, einen Link und ein Formular mit verschiedenen Eingabefeldern. In den Eingabefeldern kann der Anwender neue Basisfarben für das Dokument einstellen - typische Eingabewerte sind also hexadezimale Angaben wie #FFFFCC oder Farbwörter wie maroon. Beim Anklicken des Buttons mit der Aufschrift Testen wird die JavaScript- Funktion WerteSetzen() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementsByTagName("body")[0] auf das "erste body-Element" der Datei zu und weist den entsprechenden Eigenschaften die eingegebenen Werte aus dem Formular zu. Dadurch verändern sich die Basisfarben des Dokuments.
Sie können im MS Internet Explorer und im Netscape 6 zusätzlich auf die Eigenschaften offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent und innerHTML zugreifen. Im Netscape 6 stehen diese Eigenschaften jedoch erst nach dem Laden des Dokumentes zur Verfügung.
Beim MS Internet Explorer sind auf das body-Objekt die meisten Eigenschaften des all-Objekts anwendbar. Der Grund ist, dass body im Internet Explorer schon vor Einführung der DOM-Syntax als Objektname existierte.
Unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht vollständig nachvollziehbar und führte teilweise zu einem sehr seltsamen Verhalten.
|
|
br (HTML-Elementobjekt)HTML-Referenz: siehe Element: br
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <br> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<img src="../../../src/logo.gif" width="106" height="109" border="0" align="left"
alt="Logo" onClick="document.getElementById('Umbruch').clear='all'">
Dieser Text fliesst um das Logo herum,
weil dies im align-Attribut des Logos so angegeben ist.<br id="Umbruch">
Gilt das auch bei diesem Text?
</body></html>
|
Das Beispiel enthält eine Grafik, bei der durch die Angabe align="left" festgelegt wird, dass der nachfolgende Text rechts um die Grafik fließt. Der Text enthält einen Zeilenumbruch, markiert durch <br>. Die Grafik enthält einen Event-Handler onClick, der bewirkt, dass beim Anklicken der Grafik mit document.getElementById('Umbruch') auf das Zeilenumbruch-Element zugegriffen wird. Ihm wird die Eigenschaft clear mit dem Wert all zugewiesen. Der Text unterhalb des Umbruchs rutscht bei einem Klick auf die Grafik unter die Grafik, da <br clear="all"> die Textfortsetzung unterhalb der Grafik bewirkt.
|
|
button (HTML-Elementobjekt)HTML-Referenz: siehe Element: button
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <button>...</button> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
function ZeitAufButton() {
var jetzt = new Date();
var Zeit = jetzt.getTime();
document.getElementsByName("Zeitbutton")[0].value = Zeit;
document.getElementsByName("Zeitbutton")[0].firstChild.nodeValue = Zeit;
}
//-->
</script>
</head><body>
<form name="Formular" action="">
<button name="Zeitbutton" value="" onClick="ZeitAufButton()">Zeit!</button>
</form>
</body></html>
|
Das Beispiel definiert in einem Formular einen Button, der den Event-Handler onClick enthält. Beim Anklicken des Buttons wird deshalb die JavaScript- Funktion ZeitAufButton() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt mit Hilfe des Date-Objekts den aktuellen Zeitpunkt in Millisekunden und weist diesen ermittelten Wert sowohl dem Absendewert des Buttons als auch dessen Aufschrift zu. Dazu wird mit document.getElementsByName("Zeitbutton")[0] auf das erste Element mit dem Attribut name="Zeitbutton" zugegriffen. Der Absendewert durch Zuweisen des Wertes von Zeit an die Eigenschaft value geändert. Für die Buttonaufschrift muss der Wert des ersten Kindknotens (firstChild.nodeValue) des Buttons geändert werden. Das Beispiel bewirkt, dass bei jedem Anklicken des Buttons die Millisekundenzeit auf der Button-Aufschrift aktualisiert wird.
|
|
caption (HTML-Elementobjekt)HTML-Referenz: siehe Element: caption
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <caption>...</caption> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Wechseln() {
if(document.getElementById("THeader").align == "left")
document.getElementById("THeader").align = "right";
else
document.getElementById("THeader").align = "left";
}
//-->
</script>
</head><body>
<table border="5" cellspacing="4">
<caption id="THeader" align="left" onClick="Wechseln()"><b>Spielstand:</b></caption>
<tr>
<td>Hans Moosreiner:</td><td>5 Punkte</td>
</tr><tr>
<td>Lisa Wohlthu:</td><td>3 Punkte</td>
</tr>
</table>
</body></html>
|
Das Beispiel enthält eine kleine Tabelle mit einer Tabellenüberschrift, die durch <caption>...</caption> ausgezeichnet ist. Das einleitende Tag enthält ferner den Event-Handler onClick. Dadurch wird beim Anklicken der Tabellenüberschrift die JavaScript- Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("THeader") auf die Tabellenüberschrift zu und fragt ab, ob deren align-Eigenschaft den Wert left hat. Wenn ja, wird er auf right geändert, wenn nein (also wenn er auf right gesetzt ist), wird er wieder auf left gesetzt. Auf diese Weise springt die Tabellenüberschrift bei jedem Anklicken zur anderen Seite (links bzw. rechts).
Mit Netscape (6.1) und dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem caption-Element nicht nachvollziehbar.
|
|
center (HTML-Elementobjekt)HTML-Referenz: siehe Element: center
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <center>...</center> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<center id="zentriert" title="Das ist wirklich zentriert!"
onMouseover="alert(document.getElementById('zentriert').title)">
<h1>Das ist zentriert</h1>
<h2>Das ist zentriert</h2>
<h3>Das ist zentriert</h3>
</center>
</body></html>
|
Das Beispiel enthält einen mit <center>...</center> ausgezeichneten Bereich, innerhalb dessen alles zentriert dargestellt wird. Im einleitenden Tag ist der Event-Handler onMouseOver notiert. Beim Überfahren des zentrierten Bereichs wird ein Meldungsfenster ausgegeben, das den Wert des Attributs title ausgibt. Dazu wird mit document.getElementById('zentriert') auf das Element zugegriffen.
Opera 5.12 interpretiert dieses Beispiel ebenfalls.
|
|
cite (HTML-Elementobjekt)HTML-Referenz: siehe Element: cite
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <cite>...</cite> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<cite id="Zitat" title="Zitat von Kafka"
onMouseOver="alert(document.getElementById('Zitat').title)">
Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören.
Das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben:
Unmöglichkeit von Krähen.
</cite>
</body></html>
|
Das Beispiel enthält einen mit <cite>...</cite> ausgezeichneten Bereich. Im einleitenden Tag ist der Event-Handler onMouseOver notiert. Beim Überfahren des zentrierten Bereichs wird ein Meldungsfenster ausgegeben, das den Wert des Attributs title ausgibt. Dazu wird mit document.getElementById('Zitat') auf das Element zugegriffen.
Opera 5.12 interpretiert dieses Beispiel ebenfalls.
|
|
code (HTML-Elementobjekt)HTML-Referenz: siehe Element: code
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <code>...</code> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
<!--
.farbig { color:blue }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function farbig() {
document.getElementById("Perlbeispiel").className = "farbig";
}
//-->
</script>
</head><body>
<p><code id="Perlbeispiel" onClick="farbig()">$Text =~ s/[a-z]| //gi;</code></p>
</body></html>
|
Das Beispiel enthält in einem Textabsatz Perl-Code, der mit <code>...</code> ausgezeichnet ist. Im einleitenden <code>-Tag ist der Event-Handler onClick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Funktion farbig() aufgerufen. Diese greift mit document.getElementById("Perlbeispiel") auf das code-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse farbig zu. Der Text wird dadurch blau dargestellt.
|
|
col (HTML-Elementobjekt)HTML-Referenz: siehe Element: col
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <col> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function gleichbreit() {
for(i = 0; i < document.getElementsByTagName("col").length; i++)
document.getElementsByTagName("col")[i].width = "320";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
</table>
<a href="javascript:gleichbreit()">Spalten gleich breit machen!</a>
</body></html>
|
Das Beispiel enthält eine Tabelle mit drei Spalten, deren Breiten mit col-Elementen unterschiedlich vordefiniert werden. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Funktion gleichbreit() aufgerufen wird. Diese greift in einer for-Schleife der Reihe nach mit document.getElementsByTagName("col") auf die einzelnen col-Elemente zu und weist ihnen jeweils den Wert 320 für die Eigenschaft width zu. Dadurch wird die Tabelle dynamisch neu angezeigt, und zwar mit drei gleich breiten Spalten.
Unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht nachvollziehbar.
|
|
colgroup (HTML-Elementobjekt)HTML-Referenz: siehe Element: colgroup
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <colgroup>...</colgroup> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function ausrichten() {
document.getElementById("Tabellenspalten").align = "right";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup id="Tabellenspalten">
<col width="200">
</colgroup>
<tr><td>Hansi</td></tr>
<tr><td>Willi</td></tr>
<tr><td>Manni</td></tr>
</table>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>
|
Das Beispiel enthält eine Tabelle mit mit einer colgroup-Definition. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Funktion ausrichten() aufgerufen wird. Diese greift mit document.getElementById("Tabellenspalten") auf das colgroup-Element zu und weist ihm den Wert right für die Eigenschaft align zu. Dadurch wird die Tabelle dynamisch neu angezeigt, und alle Zellen werden rechtsbündig ausgerichtet.
Mit Netscape (6.1) und dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht nachvollziehbar. Aber auch der Internet Explorer 5.x interpretiert die Eigenschaften von colgroup nur unvollständig.
|
|
dd (HTML-Elementobjekt)HTML-Referenz: siehe Element: dd
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <dd>...</dd> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Titel() {
for(var i = 0; i < document.getElementsByTagName("dt").length; i++)
document.getElementsByTagName("dd")[i].title = document.getElementsByTagName("dt")[i].firstChild.nodeValue;
}
//-->
</script>
</head><body>
<dl>
<dt>*.bmp</dt><dd>Bitmap-Grafiken</dd>
<dt>*.html</dt><dd>Webseiten-Dateien</dd>
<dt>*.css</dt><dd>Style-Dateien für Webseiten</dd>
</dl>
<a href="javascript:Titel()">Titel</a>
</body></html>
|
Das Beispiel enthält eine Definitionsliste mit drei Einträgen. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion Titel() aufgerufen, die im Dateikopf notiert ist. Diese greift in einer for-Schleife der Reihe nach auf alle dt-Elemente zu und weist den zugehörigen dd-Elementen den Inhalt der dt-Elemente als title-Attribut zu.
|
|
del (HTML-Elementobjekt)HTML-Referenz: siehe Element: del
Auf HTML-Elementobjekte zugreifen: siehe HTML-Elementobjekte: Allgemeines zur Verwendung
HTML-Elemente <del>...</del> haben als DOM-Objekte für den Scriptsprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Grund() {
document.getElementById("HTMLVersion").cite = "http://www.w3.org/TR/html401";
}
//-->
</script>
</head><body onLoad="Grund()">
<p><del id="HTMLVersion" onMouseOver="alert(document.getElementById('HTMLVersion').cite)">
die aktuelle HTML-Version ist 2.0</del></p>
</body></html>
|
Das Beispiel enthält eine mit <del>...</del> gelöschte Änderungsmarkierung. Nachdem die Datei geladen ist (Event-Handler onLoad im einleitenden <body>-Tag), wird die JavaScript- Funktion Grund() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementById("HTMLVersion") auf das del-Element zu und weist ihm die im HTML-Code nicht notierte Eigenschaft cite mit einem Wert zu. Das del-Element verfügt zur Kontrolle über einen Event-Handler onMouseOver. Beim Überfahren des markierten Textes wird dadurch ein Meldungsfenster angezeigt, das den aktuellen Wert der Eigenschaft cite ausgibt.
Opera 5.12 erlaubt nur einen lesenden Zugriff auf diese Eigenschaft.
|
|
dfn (HTML-Elementobjekt)HTML-Referenz: siehe Element: dfn
Auf HTML-Elementobjekte zugreifen: siehe
