SELFHTML/Navigationshilfen  JavaScript/DOM  Objektreferenz
	HTML-Elementobjekte
	HTML-Elementobjekte: Allgemeines zur Verwendung  Universaleigenschaften (Wert von Universalattributen) Elementobjekte  a  abbr  acronym  address  applet  area  b  base  basefont  bdo  big  blockquote  body  br  button  caption  center  cite  code  col  colgroup  dd  del  dfn  dir  div  dl  dt  em  fieldset  font  form  frame  frameset  h1-h6  head  hr  html  i  iframe  img  input  ins  isindex  kbd  label  legend  li  link  map  menu  meta  noframes  noscript  object  ol  optgroup  option  p  param  pre  q  s  samp  script  select  small  span  strike  strong  style  sub  sup  table  tbody  td  textarea  tfoot  th  thead  title  tr  tt  u  ul  var

HTML-Elementobjekte: Allgemeines zur Verwendung

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 Script-Sprache wie JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann.

Zugriff �ber Elementnamen sowie Elementnummer oder name-Attribut (�ltere Elementlisten):

Nach M�glichkeit sollten Sie die vordefinierten Arrays verwenden, die alle Elemente des Dokuments eines Typs beinhalten. Diese wurden bereits in JavaScript 1.0 bzw. 1.1 definiert und wurden in die HTML-Variante des DOM �bernommen. Sie erlauben den Zugriff �ber die Elementnummer (z.B. das dritte img-Element im Dokument) oder �ber ein name-Attribut (z.B. ein form-Element mit name="suchformular"). Damit gelingt der Zugriff auf HTML-Elemente am sichersten, aber es k�nnen nicht alle Elemente auf diese Weise angesprochen werden.

•  document.forms erlaubt den Zugriff auf alle  form-Elemente (Formulare).
•  document.images erlaubt den Zugriff auf alle  img-Elemente (Grafiken).
•  document.links erlaubt den Zugriff auf alle  a-Elemente, die ein href-Attribut besitzen (Hyperlinks).
•  document.anchors erlaubt den Zugriff auf alle  a-Elemente, die ein name-Attribut besitzen (Verweisanker).
•  document.applets erlaubt den Zugriff auf alle  applet- und  object-Elemente, die Java-Applets einbinden.
•  window.frames erlaubt den Zugriff auf alle  frame- und  iframe-Elemente (Frames bzw. eingebettete Frames).

Gem�� der HTML-Variante des DOM k�nnen auf diese Weise auch Elemente mit einer bestimmten ID angesprochen werden. document.images["bild"] soll z.B. das img-Element ansprechen, das entweder das Attribut name="bild" oder das Attribut id="bild" besitzt. Im Vergleich zur vielseitigeren Methode document.getElementById() hat diese Schreibweise jedoch keine Vorteile, da sie ebenfalls nur von neueren Browsern unterst�tzt wird.

Zugriff �ber das name-Attribut (getElementsByName):

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. In den meisten F�llen k�nnen Sie jedoch die besagten �lteren Elementlisten verwenden.

Zugriff �ber id-Attribut (getElementById):

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.

Zugriff �ber Elementnamen sowie Elementnummer, name-Attribut oder id-Attribut (getElementsByTagName):

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 Elementenbaum. 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. In manchen F�llen k�nnen Sie jedoch die �lteren, besser unterst�tzen Elementlisten verwenden.

Eigenschaften und Methoden von HTML-Elementobjekten:

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 Attribut 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 Elementenbaum dar. Deshalb gelten f�r jedes HTML-Element auch alle Eigenschaften und Methoden des  node-Objekts.

Beachten Sie:

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.

 Universaleigenschaften

Universaleigenschaften entsprechen den  Universalattributen von HTML. Diese Eigenschaften gelten f�r fast jedes HTML-Element.

Auf HTML-Elementobjekte zugreifen		siehe  HTML-Elementobjekte: Allgemeines zur Verwendung
Eigenschaft	Status	Bedeutung
className		CSS-Klassenname
dir		Schreibrichtung
id		dokumentweit eindeutiger Name
lang		Landessprache (de, en, fr, it usw.)
title		Titel

Beispiel:

 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>

Erl�uterung:

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.

 a (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: a
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente a haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
accessKey		Hotkey f�r den Hyperlink
charset		Zeichenkodierung des Verweisziels
coords		verweis-sensitive Bereiche bei Objekten
href		Verweisziel
hreflang		Landessprache des Verweisziels
name		Ankername
rel		Verweisziel als "Vorw�rtsverkn�pfung"
rev		Verweisziel als "R�ckw�rtsverkn�pfung"
shape		verweis-sensitive Bereiche bei Objekten
tabIndex		Tabulator-Reihenfolge f�r Hyperlinks
target		Fensternamen des Verweisziels
type		MIME-Typ des Verweisziels
Methode		Bedeutung
blur()		entfernt den Fokus von diesem Element
focus()		setzt den Fokus auf dieses Element

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function AndererLink () {
  document.getElementById("selfhtml_link").href = "http://aktuell.de.selfhtml.org/";
  document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML aktuell";
}
</script>
</head><body>
<p><a id="selfhtml_link" href="http://de.selfhtml.org/">SELFHTML</a></p>
<p><a href="javascript:AndererLink()">anderer Link!</a></p>
</body></html>

Erl�uterung:

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 Internet-Adresse. 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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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.

 address (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: address
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente address haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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 = "der SELFHTML-Redaktion";
}
</script>
</head><body>
<div>Dies alles ist von
<address onmouseover="Namen()" onmouseout="Text()">der SELFHTML-Redaktion</address><div>
</body></html>

Erl�uterung:

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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung
alt		Alternativtext
archive		kommaseparierte Liste mit Archivdateien
code		Klassendatei des Applets
codeBase		Basis-URI des Applets
height		Anzeigeh�he
hspace		horizontaler Abstand zwischen Applet und umflie�endem Text
name		Name f�r das Applet
object		Objekt-Id des Applets
vspace		vertikaler Abstand zwischen Applet und umflie�endem Text
width		Anzeigebreite

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Netscape 6.0 interpretiert dieses Beispiel nicht. Opera vor Version 8 erlaubt lediglich Lesezugriff auf die verwendete Eigenschaft height.

 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 Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
accesskey		Hotkey f�r den Hyperlink
alt		Kurzbeschreibung des Verweisziels
coords		Koordinaten des verweis-sensitiven Bereichs
href		Verweisziel
nohref		aktionsloser Bereich
shape		Typ eines verweis-sensitiven Bereichs
tabindex		Tabulator-Reihenfolge f�r Hyperlinks
target		Fensternamen des Verweisziels

Beispiel:

 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>

Erl�uterung:

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.

 b (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: b
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente b haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
#wichtig { color:red; }
#unwichtig { color:black; }
</style>
<script type="text/javascript">
function Unwichtig () {
  document.getElementById('wichtig').id = 'unwichtig';
  alert(document.getElementById('unwichtig').id);
}
</script>
</head><body>
<p><b id="wichtig">wichtige Aussage!</b></p>
<p><a href="javascript:Unwichtig()">unwichtig machen!</a></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine mit <b>...</b> formatierte wichtige Aussage, bei der im einleitenden Tag das Attribut id="wichtig" notiert ist. Im Dateikopf das Element mit dieser ID mittels CSS rot gef�rbt. Zudem ist dort eine Funktion Unwichtig() notiert, die beim Aktivieren eines Verweises im Dateik�rper ausgef�hrt wird. Die Funktion setzt das id-Attribut des b-Elements auf den Wert unwichtig. 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. Durch die CSS-Formatierung f�r die ID unwichtig im Seitenkopf �ndert sich die Farbe des Textes im b-Element.

 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 Script-Sprachenzugriff die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
href		Basis-URI
target		Default Zielfenster f�r Verweise

Beispiel:

 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>

Erl�uterung:

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 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.

Beachten Sie:

Mit Netscape und Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem base-Element nicht nachvollziehbar. Die Opera-Browser der 7er-Reihe �ffnen den Verweis nicht im neuen Fenster, Opera-Versionen vorher und nachher interpretieren das Beispiel korrekt.

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.getElementById() 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 Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
color		Basis-Schriftfarbe
face		Basis-Schriftart
size		Basis-Schriftgr��e

Beispiel:

 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="4">
<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>

Erl�uterung:

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.

Beachten Sie:

Das Beispiel mit dem basefont-Element funktioniert nur im Internet Explorer.

 bdo (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: bdo
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente bdo haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Mit Internet Explorer 5.0 Macintosh Edition sowie mit Konqueror 3.4 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 wie big haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
cite		URI der Zitatquelle

Beispiel:

 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>

Erl�uterung:

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.

 body (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: body
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente body haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
aLink		dokumentweite Farbe f�r aktivierte Links
background		URI einer dokumentweiten Hintergrundgrafik
bgColor		dokumentweite Hintergrundfarbe
link		dokumentweite Farbe f�r Links zu noch nicht besuchten Seiten
text		dokumentweite Textfarbe
vLink		dokumentweite Farbe f�r Links zu bereits besuchten Seiten

Beispiel:

 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">
Hintergrundfarbe:    <input type="text" size="7" name="BgColor">
Einstellungen:       <input type="button" value="Testen!" onclick="WerteSetzen()">
</pre>
</form>

</body></html>

Erl�uterung:

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.

Beachten Sie:

Beim 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.

Sie k�nnen im Internet Explorer, Mozilla Firefox 1.0, Netscape 6, Opera 7 und Konqueror 3.3 zus�tzlich auf die Eigenschaften offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent und innerHTML zugreifen. Diese Eigenschaften stehen erst nach dem Laden des Dokumentes zur Verf�gung.

Unter dem 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 Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
clear		Fortsetzungsposition bei Textumfluss

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Im Mozilla Firefox 1.0 kommt die �nderung der clear-Eigenschaft im Beispiel erst dann zum Tragen, wenn die Fenstergr��e ge�ndert wird.

 button (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: button
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente button haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
accessKey		Hotkey f�r den Tastaturzugriff
disabled		Button kann nicht bet�tigt werden
form		zugeh�riges Formularelement
name		Name f�r den Button
tabIndex		Tabulator-Reihenfolge
type		Typ des Buttons
value		Absendewert des Buttons

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script 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 type="button" name="Zeitbutton" value="" onclick="ZeitAufButton()">Zeit!</button>
</form>
</body></html>

Erl�uterung:

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 Button-Aufschrift 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.

Beachten Sie:

Konqueror 3.1 stellt den Button selbst nicht korrekt dar.

 caption (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: caption
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente caption haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
align		Ausrichtung

Beispiel:

 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>

Erl�uterung:

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).

Beachten Sie:

Mit Netscape, Konqueror 3.4 und dem Internet Explorer 5.0 Macintosh Edition und Safari 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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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.

 cite (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: cite
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente cite haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>

Erl�uterung:

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.

 code (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: code
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente code haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.farbig { color:blue }
</style>
<script 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>

Erl�uterung:

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 Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung
ch		Ausrichtungszeichen
chOff		Position des Ausrichtungszeichens
span		f�r wie viele Spalten die Angaben gelten
vAlign		Tabellenspalten vertikal ausrichten
width		Spaltenbreite

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Unter dem Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht nachvollziehbar.

Konqueror 3.1 nimmt die �nderung der Spaltenbreiten korrekt vor, Konqueror 3.3 und 3.4 erst, wenn die Seite z.B. durch eine �nderung der Fenstergr��e oder der Schriftgr��e neu aufgebaut wird.

 colgroup (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: colgroup
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente colgroup haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung
ch		Ausrichtungszeichen
chOff		Position des Ausrichtungszeichens
span		f�r wie viele Spalten die Angaben gelten
vAlign		Tabellenspalten vertikal ausrichten
width		Spaltenbreite

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Im Netscape 6.1, dem Internet Explorer 5.0 Macintosh Edition, Mozilla Firefox 1.0 und Safari 1.2 hat das �ndern der align-Eigenschaft keine Wirkung. 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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 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>Web-Seiten-Dateien</dd>
<dt>*.css</dt><dd>Style-Dateien f�r Web-Seiten</dd>
</dl>
<a href="javascript:Titel()">Titel</a>
</body></html>

Erl�uterung:

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 haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
cite		URI f�r Gr�nde der �nderung
dateTime		Datum und Uhrzeit der �nderung

Beispiel:

 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>

Erl�uterung:

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.

Beachten Sie:

Opera 5 und 6 erlauben nur einen lesenden Zugriff auf diese Eigenschaft.

 dfn (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: dfn
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dfn haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p><dfn id="Definition" title="Dies ist eine Definition!"
onmouseover="alert(document.getElementById('Definition').title)">
Ein Uhu ist ein Vogel und kein Kleber</dfn></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine mit <dfn>...</dfn> ausgezeichnete Definition. Beim �berfahren mit der Maus (onmouseover) wird ein Meldungsfenster ausgegeben, das den Wert des title-Attributs des dfn-Elements ausgibt. Dazu wird mit document.getElementById('Definition') auf das Element zugegriffen.

 dir (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: dir
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dir haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
compact		Darstellung in enger Schrift

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("dir")[0].compact = true;
}
</script>
</head><body>
<dir onmouseover="zeigKompakt()">
<li>Eigene Dateien</li>
<li>Programme</li>
<li>Windows</li>
<li>temp</li>
</dir>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Verzeichnisliste. Beim �berfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("dir")[0] auf das erste dir-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Kein getesteter Browser interpretierte das HTML-Attribut compact.

 div (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: div
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente div haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
align		Ausrichtung

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
div { border:solid 3px red; padding:10px; }
</style>

<script type="text/javascript">
function ausrichten () {
  document.getElementById("zweiter").align = "center";
  document.getElementById("dritter").align = "right";
}
</script>
</head><body>
<div id="erster"><h1>Erster Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="zweiter"><h1>Zweiter Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="dritter"><h1>Dritter Bereich</h1><p>mit etwas Text</p></div>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt insgesamt drei div-Bereiche. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion ausrichten() aufgerufen. Diese Funktion �ndert f�r den zweiten und dritten der Bereiche die Ausrichtung auf "zentriert" bzw. "rechts". Dazu wird mit document.getElementById("zweiter") auf den zweiten Bereich zugegriffen und mit document.getElementById("dritter") auf den dritten. Alle Elemente, die innerhalb der Bereiche notiert sind, werden dynamisch neu ausgerichtet.

 dl (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: dl
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dl haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
compact		Darstellung in enger Schrift

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("dl")[0].compact = true;
}
</script>
</head><body>
<dl onmouseover="zeigKompakt()">
<dt>User's Guide</dt><dd>Benutzerhandbuch</dd>
<dt>User Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Definitionsliste. Beim �berfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("dl")[0] auf das erste dl-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Kein getesteter Browser interpretierte das HTML-Attribut compact.

 dt (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: dt
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dt haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.hervorgehoben { font-weight:bold; color:red; }
</style>
<script type="text/javascript">
function Wechseln (x) {
  if (document.getElementsByTagName("dt")[x].className == "") {
    document.getElementsByTagName("dt")[x].className = "hervorgehoben";
  } else {
    document.getElementsByTagName("dt")[x].className = "";
  }
}
</script>
</head><body>
<dl>
<dt class="" onclick="Wechseln(0)">User's Guide</dt><dd>Benutzerhandbuch</dd>
<dt class="" onclick="Wechseln(1)">User Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Definitionsliste. Jedes der dt-Elemente enth�lt eine leere Style-Klassenzuweisung und den  Event-Handler onclick. Beim Anklicken der Elemente wird jeweils die JavaScript- Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("dt")[x] auf das jeweilige Element zu - x ist dabei ein Parameter daf�r, das wie vielte Element dieses Typs in der Datei gemeint ist. Die dt-Elemente �bergeben der Funktion den entsprechenden Parameter beim Aufruf mit Wechseln(0) bzw. Wechseln(1). Das Beispiel bewirkt, dass dem betroffenen dt-Element beim ersten Anklicken der Klassenname hervorgehoben zugewiesen wird, und beim n�chsten Anklicken wieder eine leere Klasse. Die Klasse hervorgehoben, die im Dateikopf in einem Style-Bereich definiert ist, bewirkt, dass das Element fett und rot dargestellt wird.

 em (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: em
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente em haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.mitVielGefuehl { font-family:Lucida Calligraphy; font-size:150%; color:maroon; }
</style>
<script type="text/javascript">
function xem () {
  document.getElementById("Herzschmerz").className = "mitVielGefuehl";
}

function em () {
  document.getElementById("Herzschmerz").className = "";
}
</script>
</head><body>
<p>Das ist Text, der sich
<em id="Herzschmerz" onmouseover="xem()" onmouseout="em()">vor Herzschmerz kaum
retten kann</em>.</p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen Satz, von dem ein Teil mit <em>...</em> ausgezeichnet ist. Das einleitende <em>-Tag enth�lt die  Event-Handler onmouseover und onmouseout. In einem Fall wird die JavaScript- Funktion xem() aufgerufen, im anderen die Funktion em(). Beide Funktionen greifen mit document.getElementById("Herzschmerz") auf das em-Element zu und weisen einmal den Style-Klassennamen mitVielGefuehl und einmal einen leeren Klassennamen zu. Die CSS-Klasse mitVielGefuehl ist im Dateikopf definiert. Beim �berfahren des em-Elements mit der Maus wird der Text im Element dynamisch stark hervorgehoben.

 fieldset (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: fieldset
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente fieldset haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
form		zugeh�riges Formularelement

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  if (document.getElementById("Absender").form != null)
    alert("Geben Sie Vornamen und Zunamen in jedem Fall an!");
}
</script>
</head><body bgcolor="#EEEEEE">
<form name="Formular" action="">
<fieldset id="Absender" onmouseover="Hinweis()">
<legend>Absender</legend>
<table><tr>
    <td align="right">Vorname:</td>
    <td><input type="text" size="40" maxlength="40"></td>
  </tr><tr>
    <td align="right">Zuname:</td>
    <td><input type="text" size="40" maxlength="40"></td>
  </tr></table>
</fieldset>
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit einem fieldset-Bereich. Im einleitenden <fieldset>-Tag ist der  Event-Handler onmouseover notiert, der die JavaScript- Funktion Hinweis() aufruft, die im Dateikopf definiert ist.
Mit if(document.getElementById("Absender").form != null) fragt die Funktion ab, ob die Eigenschaft form einen Wert hat. Wenn der Wert ungleich null ist, bedeutet dies, dass das fieldset-Element wie vorgeschrieben innerhalb eines Formulars vorkommt. In diesem Fall wird eine Meldung ausgegeben.

 font (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: font
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente font haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
color		Schriftfarbe
face		Schriftart
size		Schriftgr��e

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var sizes = new Array("1", "2", "3", "4", "5", "6", "7");
var colors = new Array("#FF0000", "#0000FF", "#009900", "#CC00CC");
var faces = new Array("Arial", "Tahoma", "Wide Latin");
function Spielen () {
  var s = parseInt((Math.random() * 100) % 7);
  var c = parseInt((Math.random() * 100) % 4);
  var f = parseInt((Math.random() * 100) % 3);
  var i = parseInt((Math.random() * 100) % 7);
  document.getElementsByTagName("font")[i].size = sizes[s];
  document.getElementsByTagName("font")[i].color = colors[c];
  document.getElementsByTagName("font")[i].face = faces[f];
  window.setTimeout("Spielen()", 1000);
}
</script>
</head><body onload="Spielen()">
<p>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
</p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt insgesamt sieben Texte, die mit font-Elementen ausgezeichnet sind. Keines der font-Elemente enth�lt allerdings in HTML irgendwelche Attribute. Nachdem das Dokument geladen ist (Event-Handler onload im einleitenden <body>-Tag), wird die JavaScript- Funktion Spielen() aufgerufen. Zuvor wurden bereits diverse  Arrays angelegt. Die Funktion Spielen ermittelt mittels  Math.random() Zufallszahlen und trimmt diese mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion  parseInt() so, dass ganzzahlige Zufallszahlen erzeugt werden. Diese werden als Index f�r die zuvor definierten Arrays verwendet. Solcherma�en ausger�stet, greift die Funktion mit document.getElementsByTagName("font")[i] zuf�llig auf eines der font-Elemente zu und weist ihm die ebenfalls zuf�llig ermittelten Werte aus den Arrays f�r die Eigenschaften size, color und face zu. Am Ende wartet die Funktion eine Sekunde ( window.setTimeout()) und ruft sich dann selber wieder auf. Dadurch ergibt sich ein endloses Spiel an zuf�lligen Text�nderungen.

 form (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: form
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente form haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
acceptCharset		unterst�tzte Zeichens�tze
action		URI f�r die Verarbeitung der Formulardaten
elements		Array f�r die zugeh�rigen Formularelemente
enctype		MIME-Typ f�r Formulardaten�bertragung
length		Anzahl Formularelemente
name		Name des Formulars
method		�bertragungsmethode f�r Formulardaten
target		Fensternamen f�r Antwortausgaben
Methode		Bedeutung
reset()		Formular zur�cksetzen
submit()		Formular absenden

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="datei.htm" method="get">
<p>
 <input name="Text" type="text"><br>
 [<a href="javascript:document.getElementsByName('Formular')[0].submit()"><b>Absenden</b></a>]
 [<a href="javascript:document.getElementsByName('Formular')[0].reset()"><b>Abbrechen</b></a>]
</p>
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit zwei Verweisen anstelle der sonst �blichen Submit- und Reset-Buttons. Der eine Verweis f�hrt die submit()-Methode aus, der andere die reset()-Methode. Beide Verweise greifen dazu mit document.getElementsByName('Formular')[0] auf das erste Element mit dem Namen Formular zu.

Beachten Sie:

Dieses Beispiel funktioniert auch in Opera 5.12. In lokaler Umgebung au�erhalb des HTTP-Protokolls (file:) wird jedoch nach dem Absenden der Quellcode der Zieldatei angezeigt.

 frame (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: frame
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente frame haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
frameBorder		Rahmen sichtbar oder nicht sichtbar
longDesc		URI f�r l�ngere Beschreibung zum Inhalt des Frame-Fensters
marginHeight		Anzahl Pixel f�r den Abstand des Fensterinhalts zum oberen und unteren Fensterrand
marginWidth		Anzahl Pixel f�r den Abstand des Fensterinhalts zum linken und rechten Fensterrand
name		Name f�r das Frame-Fenster
noResize		Gr��e ver�nderbar oder nicht ver�nderbar
scrolling		Scroll-Leisten oder keine Scroll-Leisten
src		URI f�r den Inhalt des Frame-Fensters

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function nullRand () {
  document.getElementById("F1").marginHeight = "0";
  document.getElementById("F1").marginWidth = "0";
}
</script>
</head>
<frameset cols="50%,50%" onload="nullRand()">
 <frame id="F1" src="frame1.htm" marginheight="20" marginwidth="20">
 <frame id="F2" src="frame2.htm" marginheight="20" marginwidth="20">
</frameset>
</html>

Erl�uterung:

Das Beispiel definiert ein Frameset mit zwei Frames. Das frameset-Element besitzt den  Event-Handler onload. Nach dem Laden des Framesets wird die JavaScript- Funktion nullRand() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("F1") auf das erste frame-Element zu und setzt dessen Eigenschaften f�r marginHeight und marginWidth auf 0.

Beachten Sie:

Internet Explorer, Mozilla Firefox und Opera bis Version 7.2 erm�glichen nur den Lesezugriff auf diese Eigenschaften. Das �ndern der Eigenschaft ist zwar m�glich, die Abst�nde �ndern sich jedoch nicht.

 frameset (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: frameset
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente frameset haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
cols		Breitenverh�ltnisse f�r spaltenartig angeordnete Frame-Fenster
rows		H�henverh�ltnisse f�r reihenartig angeordnete Frame-Fenster

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function dreiFenster () {
  document.getElementById("Fenster").cols = "33%,34%,33%";
  var F3 = document.createElement("frame");
  F3.setAttribute("src", "frame3.htm");
  document.getElementById("Fenster").appendChild(F3);
}
</script>
</head>
<frameset id="Fenster" cols="50%,50%" onload="dreiFenster()">
 <frame src="frame1.htm">
 <frame src="frame2.htm">
</frameset>
</head></html>

Erl�uterung:

Das Beispiel definiert ein Frameset mit zwei Frames. Nachdem das Frameset geladen ist (Event-Handler onload im einleitenden <frameset>-Tag), wird die Funktion dreiFenster() aufgerufen. Diese Funktion greift mit document.getElementById("Fenster") auf das frameset-Element zu und setzt dessen Eigenschaft cols neu - und zwar so, dass nun drei Spalten definiert werden. Dann wird mit  document.createElement() ein neues Element erzeugt, dem mit  setAttribute() eine anzuzeigende Datei zugewiesen wird. Anschlie�end wird der neue Elementknoten mit  appendChild() als letztes neues Kindelement in das frameset-Element eingef�gt.

Beachten Sie:

Opera und Firefox akzeptieren die �nderung der Breitenverh�ltnisse, zeigen aber den dritten, eingef�gten Frame nicht an. Lediglich der Internet Explorer, Konqueror und Safari zeigen den dritten Frame.

 h1-h6 (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: h1-h6
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente h1 usw. haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
align		Ausrichtung

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function rechtslinks () {
  for (var i = 0; i < document.getElementsByTagName("h1").length; i++) {
    if (document.getElementsByTagName("h1")[i].align == "left") {
      document.getElementsByTagName("h1")[i].align = "right";
    } else {
      document.getElementsByTagName("h1")[i].align = "left";
    }
  }
}
</script></head><body>
<h1 align="left">Kapitel 1</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 2</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 3</h1>
<p>und ein <a href="javascript:rechtslinks()">Ausrichtungsverweis</a></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt insgesamt drei �berschriften erster Ordnung. Ganz unten ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Funktion rechtslinks() aufgerufen wird, die im Dateikopf steht. Diese greift in einer  for-Schleife der Reihe nach mit document.getElementsByTagName("h1")[i] auf alle h1-Elemente des Dokuments zu. F�r jedes dieser Elemente wird abgefragt, ob seine Eigenschaft align den Wert left hat. Wenn ja, wird er auf right gesetzt, wenn nein, wird er wieder auf left gesetzt. Bei jedem Anklicken des Verweises �ndern also alle drei �berschriften ihre Ausrichtung.

Beachten Sie:

Das Beispiel ist mit Netscape 6 nicht nachvollziehbar.

 head (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: head
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

Das HTML-Element <head>...</head> hat als DOM-Objekt f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
profile		URI f�r Metadaten-Profil

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head profile="http://dublincore.org/documents/dcq-html/">
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
<meta name="DC.language" scheme="DCTERMS.RFC3066" content="de">
</head><body>
<script type="text/javascript">
document.write("Verwendetes Profil: " + document.getElementsByTagName("head")[0].profile);
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt im einleitenden <head>-Tag eine profile-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit document.getElementsByTagName("head")[0] auf das head-Element zugegriffen.

Beachten Sie:

Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML-4.0-Standard f�r das head-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

 hr (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: hr
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente hr haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Trennlinie
noShade		Trennlinie wird flach und ohne 3D-Effekt dargestellt
size		Dicke der Trennlinie
width		L�nge der Trennlinie

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Dicke = 3;
function dicker () {
  Dicke += Dicke;
  document.getElementById("Linie").size = Dicke;
}
</script></head><body>
<hr id="Linie" noshade="noshade" size="3" onclick="dicker()">
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Trennlinie der Dicke 3 (size="3"). Das hr-Element enth�lt einen  Event-Handler onclick. Beim Anklicken der Trennlinie wird die JavaScript- Funktion dicker() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erh�ht den Wert der Variablen Dicke um sich selbst und greift dann mit document.getElementById("Linie") auf das hr-Element zu, um dessen Eigenschaft size mit dem neuen Wert von Dicke zu belegen. Die Linie wird also bei jedem Anklicken deutlich dicker.

Beachten Sie:

Safari 1.2 interpretiert nur die Eigenschaften align und size, ab Version 2.0 auch width, Konqueror interpretiert die Eigenschaft size nicht (aber beispielsweise width) und zeigt daher das Beispiel nicht an.

 html (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: html
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

Das HTML-Element <html>...</html> hat als DOM-Objekt f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
version		HTML-Sprachversion

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("Dies ist in HTML " + document.getElementsByTagName("html")[0].version +
               " geschrieben!");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt im einleitenden <html>-Tag eine version-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit document.getElementsByTagName("html")[0] auf das html-Element zugegriffen.

Beachten Sie:

Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML-4.0-Standard f�r das html-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

 i (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: i
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente i haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function set_normal () {
  document.getElementById("schief").className = "normal";
}
</script>
</head><body>
<i id="schief">schiefe Aussage!</i><br>
<a href="javascript:set_normal()">gerade machen!</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen mit <i>...</i> formatierten Text, und darunter einen Verweis. Beim Anklicken des Verweises wird die JavaScript- Funktion set_normal() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("schief") auf das i-Element zu und setzt dessen Universaleigenschaft className neu. Die entsprechende Klasse normal ist im Dateikopf in einem Style-Bereich definiert.

 iframe (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: iframe
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente iframe haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung
frameBorder		Rahmen sichtbar oder nicht sichtbar
height		Anzeigeh�he
longDesc		URI f�r l�ngere Beschreibung zum Inhalt des Frame-Fensters
marginHeight		Anzahl Pixel f�r den Abstand des Fensterinhalts zum oberen und unteren Fensterrand
marginWidth		Anzahl Pixel f�r den Abstand des Fensterinhalts zum linken und rechten Fensterrand
name		Name f�r das Frame-Fenster
scrolling		Scroll-Leisten oder keine Scroll-Leisten
src		URI f�r den Inhalt des Frame-Fensters
width		Anzeigebreite

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function groesser () {
  document.getElementById("Frame").width = "600";
  document.getElementById("Frame").height = "400";
}
</script></head><body>
<iframe id="Frame" src="frame1.htm" width="400" height="300"></iframe>
<p><a href="javascript:groesser()">Anzeigefenster erweitern</a></p>
</body></html>

Erl�uterung:

Das Beispiel definiert einen eingebetteten Frame. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion groesser() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementById("Frame") auf das iframe-Element zu und �ndert dessen Eigenschaften width und height. Das eingebettete Frame-Fenster wird dadurch dynamisch vergr��ert.

 img (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: img
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente img haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Grafik
alt		Alternativtext
border		Rahmendicke um Grafik
height		Anzeigeh�he
hspace		horizontaler Abstand zwischen Grafik und umflie�endem Text
isMap		Grafik benutzt ein serverseitiges Handling f�r verweis-sensitive Fl�chen
longDesc		URI f�r Langbeschreibung zur Grafik
lowSrc		URI einer Vorabgrafik
name		Name der Grafik
src		URI der Grafik
useMap		Verweis zu einem  map-Bereich
vspace		vertikaler Abstand zwischen Grafik und umflie�endem Text
width		Anzeigebreite

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function neuesBild () {
  if (document.getElementById("Bild").src.indexOf("iso8859_1.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_2.gif";
    document.getElementById("Bild").title = "Bild 2";
    return;
  }
  if (document.getElementById("Bild").src.indexOf("iso8859_2.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_3.gif";
    document.getElementById("Bild").title = "Bild 3";
    return;
  }
  if (document.getElementById("Bild").src.indexOf("iso8859_3.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_1.gif";
    document.getElementById("Bild").title = "Bild 1";
    return;
  }
}
</script></head><body>
<img id="Bild" src="../../../inter/iso8859_1.gif" width="289" height="302" alt="Bild 1" title="Bild 1"><br>
<a href="javascript:neuesBild()">neues Bild</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Grafikreferenz f�r eine Ressource namens 8859_1.gif. Unterhalb davon ist ein Verweis notiert. Bei Anklicken des Verweises wird die JavaScript- Funktion neuesBild() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt mit document.getElementById("Bild").src.indexOf(...) ab, welches Bild gerade angezeigt wird (siehe auch  indexOf). Abh�ngig davon werden die beiden Eigenschaften src und title mit neuen Werten belegt. Das Beispiel bewirkt, dass bei jedem Anklicken des Verweises ein neues Bild angezeigt wird.

Beachten Sie:

In der Eigenschaft src ist der vollst�ndige URI des Bildes gespeichert, und nicht die eventuell relative Angabe, der bei <img src=> zugewiesen wurde. Deshalb muss der Inhalt von src auch mit einer Zeichenkettenmethode wie indexOf() durchsucht werden, um nach einem Dateinamen zu suchen.

In Netscape 6 sind die Eigenschaften hspace, vspace und border fehlerhaft implementiert.

 input (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: input
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente input haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
accept		bei type="file" erlaubte MIME-Typen f�r File-Upload
accessKey		Hotkey f�r das Element
align		Ausrichtung
alt		Alternativtext bei type="image"
checked		Ausw�hlen bei bei type="radio" oder type="checkbox"
defaultValue		vorbelegter Wert
defaultChecked		per Vorbelegung ausgew�hlt oder nicht
disabled		Element kann nicht ge�ndert werden
form		zugeh�riges Formular
maxLength		maximale Anzahl eingebbarer Zeichen
name		Name des Elements
readOnly		Wert des Elements kann nicht ver�ndert werden
size		Anzeigebreite bei type="text"
src		URI der Grafik bei type="image"
tabIndex		Tabulator-Reihenfolge
type		Typ des Formularelements
useMap		Verweis zu einem  map-Bereich bei type="image"
value		Wert des Elements
Methode		Bedeutung
blur()		Fokus vom Element entfernen
focus()		Fokus auf Element setzen
select()		Wert selektieren
click()		Element anklicken

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Breite = 3;
function erweitern () {
  Breite += 1;
  document.getElementsByName("Eingabe")[0].size = Breite;
}
</script></head><body>
<form name="Formular">
Geben Sie Text ein:<br>
<input type="text" size="3" name="Eingabe" onkeypress="erweitern()">
</form>
</body></html>

Erl�uterung:

In der Beispieldatei ist ein Formular mit einem zun�chst ziemlich kleinen Eingabefeld (size="3") notiert. Das Eingabefeld enth�lt den  Event-Handler onkeypress. Bei jedem Tastendruck, der erfolgt, w�hrend das Eingabefeld den Fokus hat, wird darum die JavaScript- Funktion erweitern() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementsByName("Eingabe")[0] auf das erste Element mit dem Namen Eingabe zu, also das Eingabefeld, und �ndert dessen Eigenschaft size mit dem aktuellen Wert der Variablen Breite. Diese wird bei jedem Aufruf der Funktion um 1 erh�ht. Das Beispiel bewirkt, dass das Eingabefeld um so gr��er wird, je mehr Text eingegeben wird.

Beachten Sie:

Safari 1.2 und Konqueror akzeptieren zwar Angaben zur Eigenschaft size, ver�ndern aber das Eingabefeld nicht.

 ins (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: ins
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ins haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
cite		URI f�r Gr�nde des Einf�gens
dateTime		Datum und Uhrzeit des Einf�gens

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Text <ins id="hinzugekommen"
onmouseover="document.getElementById('hinzugekommen').title = 'das ist hinzugekommener Text'">
  mit weiterem Text</ins></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen Absatz, von dessen Text ein Teil mit <ins>...</ins> ausgezeichnet ist. Beim �berfahren dieses Textes mit der Maus (onmouseover) wird dynamisch die Universaleigenschaft title mit einem Wert belegt. Dazu wird mit document.getElementById('hinzugekommen') auf das ins-Element zugegriffen.

 isindex (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: isindex
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente isindex haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
form		zugeh�riges Formular
prompt		Labeltext

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<isindex title="selten angewendetes HTML-Element" id="Eingabe"
  onmouseover="alert(document.getElementById('Eingabe').title)">
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein isindex-Element. Beim �berfahren des Elements mit der Maus wird ein Meldungsfenster ausgegeben, das den Wert des title-Attributs ausgibt, das im Element notiert ist. Dazu wird mit document.getElementById('Eingabe') auf das Element zugegriffen.

Beachten Sie:

Der  Event-Handler onmouseover kann zwar auf dieses Element angewendet werden, ist jedoch kein Bestandteil der Standards.

Das vorliegende Beispiel wird vom Internet Explorer 5.0 Macintosh Edition nicht interpretiert.

 kbd (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: kbd
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente kbd haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  document.getElementById("Keyboard").title = "Sie haben es geschafft!";
  alert(document.getElementById("Keyboard").title);
}
</script></head><body onkeypress="Hinweis()">
<kbd id="Keyboard">Taste dr�cken</kbd>:
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Aufforderung eine Taste zu dr�cken, die sinnigerweise <kbd>...</kbd> eingeschlossen ist. Das einleitende <body>-Tag der Datei enth�lt den  Event-Handler onkeypress. Wenn das Dokument den Fokus hat und der Anwender irgendeine Taste dr�ckt, wird die JavaScript- Funktion Hinweis() aufgerufen, die im Dateikopf definiert ist. Diese Funktion greift mit document.getElementById("Keyboard") auf das kbd-Element zu und weist dessen Universaleigenschaft title einen Wert zu. Anschlie�end wird zur Kontrolle genau diese Universaleigenschaft in einem Meldungsfenster ausgegeben.

 label (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: label
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente label haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
accessKey		Hotkey f�r das zugeh�rige Element
form		zugeh�riges Formular
htmlFor		Id des Elements, zu dem das Label geh�rt

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<table>
  <tr>
    <td><label id="VN" for="Vorname">Ihr Vorname:</label></td>
    <td><input type="text" id="Vorname"></td>
  </tr><tr>
    <td><label id="ZN" for="Zuname">Ihr Zuname:</label></td>
    <td><input type="text" id="Zuname"></td>
  </tr>
</table>
</form>
<script type="text/javascript">
document.getElementById("Vorname").value = document.getElementById("VN").htmlFor;
document.getElementById("Zuname").value = document.getElementById("ZN").htmlFor;
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit zwei Eingabefeldern. Die Beschriftungen der Eingabefelder sind jeweils mit einem label-Element ausgezeichnet. Unterhalb des Formulars ist ein Script-Bereich notiert. Dort werden die beiden Eingabefelder mit Werten vorbelegt, und zwar mit den Werten, die den id-Attributen der zugeh�rigen label-Element zugewiesen sind. Dazu wird mit document.getElementById("VN") und document.getElementById("ZN") auf die label-Elemente zugegriffen. Ihre Eigenschaft htmlFor wird den Formularfeldern zugewiesen, auf die ebenfalls mit getElementById() zugegriffen wird.

 legend (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: legend
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente legend haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
accessKey		Hotkey f�r das Element
align		Ausrichtung
form		zugeh�riges Formular

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<fieldset>
<legend id="L1">Absender</legend>
<input type="text" size="50" name="Absendername"
       onfocus="document.getElementById('L1').align = 'right'"
       onblur="document.getElementById('L1').align = 'left'">
</fieldset>
<fieldset>
<legend id="L2">Mitteilung</legend>
<input type="text" size="50" name="Mitteilungstext"
       onfocus="document.getElementById('L2').align = 'right'"
       onblur="document.getElementById('L2').align = 'left'">
</fieldset>
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular, bei dem f�r jedes der beiden Eingabefelder ein fieldset-Bereich mitsamt legend-Element definiert ist. Sobald eines der Eingabefelder den Fokus erh�lt (onfocus), wird der zugeh�rige Legendentext rechtsb�ndig ausgerichtet. Sobald das Eingabefeld den Fokus wieder verliert (onblur), wird der Legendentext wieder linksb�ndig ausgerichtet. Dazu wird mit document.getElementById('L1') bzw. document.getElementById('L2') auf die legend-Elemente zugegriffen. Neu gesetzt wird jeweils ihre Eigenschaft align.

Beachten Sie:

Im Netscape 6 erfolgt die Ausrichtung ausgehend vom rechten Rand des Eingabefeldes. Internet Explorer 5.0 und Opera interpretieren dieses Beispiel nicht. Safari 1.2 interpretiert von den eigenen Eigenschaften nur form. Konqueror 3.1 interpretiert das Beispiel vollst�ndig, Konqueror 3.3 und 3.4 tun dies nicht mehr.

 li (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: li
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente li haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
type		Aufz�hlungszeichen oder der Nummerierungstyp
value		Wert der laufenden Nummerierung neu setzen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.hinterlegt { background-color:yellow }
</style>
<script type="text/javascript">
function Aendern () {
  for (var i = 0; i < document.getElementsByTagName("li").length; i++)
    if (i % 2 != 0) {
      document.getElementsByTagName("li")[i].className = "hinterlegt";
      document.getElementsByTagName("li")[i].type = "I";
    }
}
</script>
</head><body>
<ol>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
</ol>
<a href="javascript:Aendern()">gerade Listenpunkte hinterlegen!</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine nummerierte Liste mit einigen Listenpunkten. Unterhalb davon ist ein Verweis notiert. Bei Anklicken des Verweises wird die JavaScript- Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion geht in einer  for-Schleife der Reihe nach alle li-Elemente durch, wobei sie mit document.getElementsByTagName("li") darauf zugreift. Bei geraden Listenpunkten werden zwei �nderungen durchgef�hrt: erstens erhalten diese Listenpunkte eine oben im Style-Bereich definierte CSS-Klasse zugewiesen, die dem Element eine andere Hintergrundfarbe zuweist, und zweitens wird der Nummerierungstyp dieser Listenpunkte auf "r�misch gro�geschrieben" gesetzt.

 link (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: link
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente link haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
charset		Zeichenkodierung des Verweisziels
disabled		als Button anklickbar oder nicht
href		Verweisziel
hreflang		Landessprache des Verweisziels
media		Ausgabemedium
rel		Verweisziel als "Vorw�rtsverkn�pfung"
rev		Verweisziel als "R�ckw�rtsverkn�pfung"
target		Fensternamen des Verweisziels
type		MIME-Typ des Verweisziels

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
function CSS_Wechsel () {
  document.getElementById("CSS").href = "styles_2.css";
}
</script>
</head><body>
<h1>Dies und das</h1>
<a href="javascript:CSS_Wechsel()">anderes Stylesheet!</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt im Dateikopf ein HTML-Tag zum Einbinden eines Stylesheets. Innerhalb des sichtbaren Dokumentbereichs ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Funktion CSS_Wechsel() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("CSS") auf das link-Element zu, das die CSS-Datei einbindet, und weist der Eigenschaft href einen neuen Wert zu, n�mlich die neue CSS-Datei. Dadurch wird die neue CSS-Datei relevant f�r alle Formatierungen innerhalb der HTML-Datei.

Beachten Sie:

Mit Netscape vor Version 6.2 und dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

 map (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: map
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente map haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
areas		Array der  area-Definitionen
name		Ankername des Definitionsbereichs

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigCoords () {
  alert(document.getElementsByName("Testbild")[0].areas[0].coords);
}
</script>
</head><body>
<map name="Testbild">
<area id="Verweis" shape="rect" coords="1,1,249,49"
      href="javascript:zeigCoords()" alt="Verweis">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild" alt="verweis-sensitive Grafik">
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Grafik, die auf einen ebenfalls enthaltenen verweis-sensitiven Bereich verweist. Dort wird ein verweis-sensitives Rechteck f�r die Grafik definiert. Beim Anklicken dieses Bereichs wird die JavaScript- Funktion zeigCoords() aufgerufen, die im Dateikopf notiert ist. Die Funktion gibt die Koordinaten des verweis-sensitiven Bereichs aus, indem sie mit document.getElementsByName("Testbild")[0].areas[0].coords auf den areas-Array des map-Elements zugreift und die Eigenschaft coords von dessem ersten Element anspricht.

 menu (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: menu
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente menu haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
compact		Darstellung in enger Schrift

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("menu")[0].compact = true;
}
</script>
</head><body>
<menu onmouseover="zeigKompakt()">
<li>Datei</li>
<li>Bearbeiten</li>
<li>Ansicht</li>
<li>Format</li>
</menu>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Men�liste. Beim �berfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("menu")[0] auf das erste menu-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Weder Netscape, Internet Explorer, Mozilla Firefox, Opera, Konqueror noch Safari interpretieren das HTML-Attribut compact.

 meta (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: meta
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente meta haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
content		Wert/Inhalt der Meta-Angabe
httpEquiv		Eigenschaft f�r Meta-Informationen (f�r HTTP-Kopfdaten)
name		Eigenschaft f�r Meta-Informationen
scheme		Schema f�r den Wert der Eigenschaft

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="keywords" content="Metaliste, JavaScript, Anzeige">
<meta name="irgendein Name" content="Irgendein Inhalt">
<title>Test</title>
<script type="text/javascript">
function Metaliste () {
  var metas = document.getElementsByTagName("meta");
  var liste, i;
  liste = "Diese Datei hat " + metas.length + " Meta-Tags:\n";
  for (i = 0; i < metas.length; i++) {
    liste = liste + "Name: " + metas[i].name + " httpEquiv: " + metas[i].httpEquiv +
      " Inhalt: " + metas[i].content + " Schema: " + metas[i].scheme + "\n";
  }
  alert(liste);
}
</script>
</head><body>
<p><a href="javascript:Metaliste()">Liste der Meta-Tags anzeigen</a></p>
</body>
</html>

Erl�uterung:

Das Beispiel enth�lt drei Meta-Elemente. Die JavaScript- Funktion Metaliste() fragt mittels document.getElementsByTagName("meta") alle Meta-Elemente ab und speichert f�r den leichteren und schnelleren Zugriff das Array aller Elemente in der Variablen metas. In der Variablen liste wird dann der auszugebende Text zusammengesetzt.

 noframes (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: noframes
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente noframes haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head>
<frameset cols="50%,50%">
  <frame id="F1" src="frame1.htm">
  <frame id="F2" src="frame2.htm">
  <noframes title="Das ist aber ein doofer Browser!">
  <body>
    <p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p>
    <a href="javascript:alert(document.getElementsByTagName('noframes')[0].title)">weitere Infos</a>
  </body>
  </noframes>
</frameset>
</html>

Erl�uterung:

Das Beispiel enth�lt eine Frameset-Definition und einen alternativen noframes-Bereich. Innerhalb davon ist ein Verweis notiert, bei dessen Anklicken der Wert der Universaleigenschaft title des einleitenden <noframes>-Tags in einem Meldungsfenster ausgegeben wird.

Beachten Sie:

Leider ist dieses Beispiel mit den g�ngigen Browsern nicht nachvollziehbar, da diese Frames unterst�tzen und auch kein Abschalten von Frames erm�glichen. Eine Ausnahme bildet hier Opera, der ein Abschalten von Frames zul�sst und das Beispiel auch interpretiert.

 noscript (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: noscript
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente noscript haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 </head><body>
<script type="text/tcl">
 proc square {i} {
    document write "The call passed $i to the function.<BR>"
    return [expr $i * $i]
  }
  document write "The function returned [square 5]."
</script>
<noscript id="tcl" title="Ich verstehe kein tcl.">
 <p onmouseover="alert(document.getElementById('tcl').title)">Ein Browser der kein tcl kann.</p>
 </noscript>
</body></html>

Erl�uterung:

Im Beispiel wurde ein Script-Bereich in der Sprache tcl dargestellt. Browser, die diese Sprache nicht interpretieren, interpretieren den zugeh�rigen noscript-Bereich und zeigen den alternativen Text an. Da es sich um eine andere Sprache als JavaScript handelt, k�nnen Sie auf das Script-Element mit JavaScript zugreifen. Wenn die Maus �ber den Absatz bewegt wird, wird der Titel des noscript-Elementes angezeigt.

Beachten Sie:

Der Internet Explorer, Netscape und Konqueror zeigen das noscript-Element im Beispiel nur bei ausgeschaltetem JavaScript an.

 object (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: object
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente object haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung des Objekts
archive		kommaseparierte Liste mit Archivdateien f�r das Objekt
border		Rahmendicke um Objekt
code		Klassendatei bei Java-Applets
codeBase		Basis-URI f�r Angaben zu data und archive
codeType		MIME-Typ der Datenquelle
data		URI der Datenquelle
declare		Objekt wird geladen, aber nicht initialisiert
form		zugeh�riges Formularelement
height		Anzeigeh�he
hspace		horizontaler Abstand zwischen Objekt und umflie�endem Text
name		Name der Grafik
standBy		Meldungstext, der angezeigt wird, w�hrend das Objekt geladen wird
tabIndex		Tabulator-Reihenfolge f�r Objekte
type		MIME-Typ der Datenquelle
useMap		Verweis zu einem  map-Bereich
vspace		vertikaler Abstand zwischen Objekt und umflie�endem Text
width		Anzeigebreite

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function groesser () {
  document.getElementById("TXT").width = "640";
  document.getElementById("TXT").height = "480";
}
</script>
</head><body>
<p><object id="TXT" data="html.txt" type="text/plain" width="320" height="240"></object></p>
<p><a href="javascript:groesser()">mehr sehen!</a></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt die Objektdefinition einer TXT-Datei. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion groesser() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("TXT") auf das object-Element zu und �ndert dessen Eigenschaften f�r width und height. Das Objekt wird dadurch dynamisch vergr��ert.

Beachten Sie:

In Netscape bis Version 6.1 ist dieses Beispiel nicht nachvollziehbar, Opera beherrscht es ab Version 7.60.

 ol (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: ol
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ol haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
compact		Darstellung in enger Schrift
start		Startwert f�r die Nummerierung
type		Art der Nummerierung

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function roemisch () {
  document.getElementById("Liste").type = "I";
}

function normal () {
  document.getElementById("Liste").type = "1";
}
</script>
</head><body>
<ol id="Liste">
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>vier</li>
<li>f�nf</li>
</ol>
<a href="javascript:roemisch()">r�misch</a><br>
<a href="javascript:normal()">normal</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine nummerierte Liste. Unterhalb davon sind zwei Verweise notiert. Der eine ruft eine JavaScript- Funktion roemisch() auf, der andere eine Funktion normal(). Beide Funktionen greifen jeweils mit document.getElementById("Liste") auf das Start-Tag der nummerierten Liste zu und �ndern dessen Eigenschaft type. Im einen Fall wird die Nummerierung dynamisch durch r�mische Ziffern ersetzt, im andern Fall werden wieder arabische Ziffern benutzt.

 optgroup (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: optgroup
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente optgroup haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
disabled		Gruppe von Eintr�gen kann nicht ausgew�hlt werden
label		Text des Gruppeneintrags

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Namen" size="1" onchange="alert(document.getElementById('A').label)">
 <optgroup label="Namen mit A" id="A">
  <option label="Anna"> Anna</option>
  <option label="Anke"> Anke</option>
 </optgroup>
</select>
</form>
</body></html>

Erl�uterung:

Das Beispiel definiert eine Men�strutkur. Sobald ein Eintrag ausgew�hlt ist (onchange), wird in einem Meldungsfenster der Wert der Eigenschaft label des optgroup-Elements mit dem id-Wert A ausgegeben.

Beachten Sie:

Weder Netscape noch Internet Explorer interpretieren Men�strukturen bis auf den heutigen Tag korrekt - Netscape 6 zwar ansatzweise, aber noch nicht so wie es gedacht ist. Dennoch interpretieren beide Browser das obige JavaScript. Safari 1.0 verh�lt sich ebenso, Safari 1.2 interpretiert die Eigenschaft disabled nicht.

 option (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: option
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente option haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
defaultSelected		vorausgew�hlter Auswahllisteneintrag
disabled		Auswahllisteneintrag kann nicht ausgew�hlt werden
form		zugeh�riges Formular
index		Indexnummer des Auswahllisteneintrags (erster Eintrag hat Nummer 0, zweiter Nummer 1 usw.)
label		Text des Eintrags im Zusammenhang mit Men�strukturen
selected		Auswahllisteneintrag wird ausgew�hlt
text		Text des Auswahllisteneintrags
value		Absendewert des Auswahllisteneintrags

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Zutaten" size="1">
  <option value="Z_101">Salami</option>
  <option value="Z_102">Pilze</option>
  <option value="Z_103">Schinken</option>
  <option value="Z_104">Oliven</option>
  <option value="Z_105">Paprika</option>
</select>
</form>
<script type="text/javascript">
document.write("<table border=\"1\">");

for (i = 0; i < document.getElementsByTagName("option").length; i++) {
  document.write("<tr><td><b>Zutat:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("option")[i].text);
  document.write("<\/td><td><b>interner Absendewert:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("option")[i].value);
  document.write("<\/td><\/tr>");
}

document.write("<\/table>");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit einer Auswahlliste. Unterhalb davon ist ein Script notiert, das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer  for-Schleife der Reihe nach alle option-Elemente durch und greift mit document.getElementsByTagName("option") auf die einzelnen option-Elemente zu. F�r jedes Element werden der interne Absendewert (value) und der Auswahltext (text) in die Tabelle geschrieben.

 p (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: p
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente p haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
align		Ausrichtung

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausrichten (wie) {
  for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
    document.getElementsByTagName("p")[i].align = wie;
  }
}
</script>
</head><body>
<p>Der erste</p>
<p>Der zweite</p>
<p>Der dritte</p>
<form name="Formular" action="">
<input type="button" value="links" onclick="Ausrichten('left')">
<input type="button" value="zentriert" onclick="Ausrichten('center')">
<input type="button" value="rechts" onclick="Ausrichten('right')">
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt drei Textabs�tze. Unterhalb davon ist ein Formular mit drei Klick-Buttons notiert. Jeder Button ruft beim Anklicken die JavaScript- Funktion Ausrichten() auf, die im Dateikopf notiert ist, und �bergibt ihr einen Wunschwert f�r die Ausrichtung (left, center und right). Die Funktion Ausrichten() geht in einer  for-Schleife mit document.getElementsByTagName("p") der Reihe nach alle p-Elemente des Dokuments durch und weist ihren Eigenschaften align den �bergebenen Parameter f�r die Ausrichtung zu. Dadurch bewirkt der Klick auf einen der Buttons die dynamische Ausrichtung aller Textabs�tze.

 param (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: param
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente param haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
name		Name des Parameters
type		MIME-Typ des Wertes
value		Initialisierungswert f�r den Parameter
valueType		Informationen zum Attribut type

Beispiel:

 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>
<script type="text/javascript">
document.write("<table>");
for (var i = 0; i < document.getElementsByTagName("param").length; i++) {
  document.write("<tr><td><b>Parameter:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("param")[i].name);
  document.write("<\/td><td><b>Wert:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("param")[i].value);
  document.write("<\/td><\/tr>");
}

document.write("<\/table>");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Java-Applet mit verschiedenen Parametern. Unterhalb davon ist ein Script notiert, das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer  for-Schleife der Reihe nach alle param-Elemente durch und greift mit document.getElementsByTagName("param") auf die einzelnen param-Elemente zu. F�r jedes Element werden der Parametername (name) und der zugeh�rige Wert (value) in die Tabelle geschrieben.

Beachten Sie:

Im Internet Explorer bis Version 5.5 l�sst sich dieses Beispiel merkw�rdigerweise nur nachvollziehen, wenn sich die param-Elemente nicht innerhalb eines g�ltigen Elternelementes befinden. Das vorliegende Beispiel wird vom Internet Explorer 5.0 Macintosh Edition korrekt interpretiert.

 pre (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: pre
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente pre haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
width		feste Breite f�r Inhalt

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Breite () {
  document.getElementById("x").width = "15";
}
</script>
</head><body>
<pre id="x">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</pre>
<a href="javascript:Breite()">Breite auf 15 setzen</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen pre-Bereich mit 30 x-Zeichen pro Zeile. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Funktion Breite() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("x") auf das pre-Element zu und weist ihm f�r die Eigenschaft width den Wert 15 zu.

Beachten Sie:

Keiner der getesteten Browser interpretierte das Attribut width im Zusammenhang mit pre-Elementen.

 q (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: q
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente q haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft	Status	Bedeutung
cite		URI f�r die Quelle des Zitats

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Wie sagte Goethe doch?
<q id="Faustzitat" cite="http://gutenberg.spiegel.de/goethe/faust1/faust005.htm"
onmouseover="alert(document.getElementById('Faustzitat').cite)">
Habe nun, ach! Philosophie, / Juristerei und Medizin, /
Und leider auch Theologie / Durchaus studiert, mit hei�em Bem&uuml;hn. /
Da steh' ich nun, ich armer Tor, / Und bin so klug als wie zuvor!</q></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Zitat, in dessen einleitendem Tag ein  Event-Handler onmouseover notiert ist. Beim �berfahren mit der Maus wird ein Meldungsfenster ausgegeben, das den Wert des Attributs cite ausgibt. Dazu wird mit document.getElementById('Faustzitat').cite auf die entsprechende Elementeigenschaft zugegriffen.

Beachten Sie:

Netscape 6, Opera, Konqueror, Internet Explorer 5.0 Macintosh Edition und Safari schlie�en das Zitat in "..." ein. Opera bis Version 6 interpretiert zwar den Event-Handler, gibt aber als Eigenschaft des Attributes cite den Wert undefined zur�ck.

 s (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: s
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente s haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.rot { color:red }
</style>
<script type="text/javascript">
function deutlicher () {
  document.getElementById("schweinisch").className = "rot";
}
</script>
</head><body>
<h1><s id="schweinisch">Es tut so gut ein Schwein zu sein</s></h1>
<a href="javascript:deutlicher()">deutlicher!</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine �berschrift mit durchgestrichenem Text. Unterhalb davon steht ein Verweis, bei dessen Anklicken die JavaScript- Funktion deutlicher() aufgerufen wird. Mit document.getElementById("schweinisch") greift diese Funktion auf das s-Element zu und weist ihm f�r die Universaleigenschaft className den Klassennamen rot zu, f�r den im Dateikopf in einem Style-Bereich CSS-Definitionen exisiteren. Der durchgestrichene Text wird dadurch rot.

 samp (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: samp
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente samp haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Ich sage zum Beispiel immer <samp id="zumbeispiel"
onmouseover="alert(document.getElementById('zumbeispiel').id)">zum
Beispiel</samp></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen mit <samp>...</samp> ausgezeichneten Text. Im Einleitungs-Tag ist der  Event-Handler onmouseover notiert. Beim �berfahren des Textes mit der Maus wird in einem Meldungsfenster der ID-Wert des Elements ausgegeben. Dazu wird mit document.getElementById('zumbeispiel').id auf die entsprechende Eigenschaft zugegriffen.

 script (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: script
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente script haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
charset		Zeichenkodierung der bei src angegebenen Scriptdatei
defer		Script kann keine Inhalte im Dokumentfenster �ndern oder erzeugen
event		Ereignis f�r Scriptausf�hrung
htmlFor		Element, f�r das das Script ausgef�hrt wird
src		URI einer Scriptdatei
text		Inhalt des Scripts
type		MIME-Typ der Script-Sprache

Beispiel: JavaScript-Datei hallo_deutsch.js

function hallo () {
  alert("Hallo Welt");
}

Beispiel: JavaScript-Datei hallo_englisch.js

function hallo () {
  alert("hello world");
}

Beispiel: HTML-Datei

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script src="hallo_deutsch.js" type="text/javascript">
</script>
<script type="text/javascript">
function englisch () {
  if (document.getElementsByTagName("script")[0].src.indexOf("hallo_englisch.js" ==  -1) {
    document.getElementsByTagName("script")[0].src = "hallo_englisch.js";
  }
  hallo();
}

function deutsch () {
  if (document.getElementsByTagName("script")[0].src.indexOf("hallo_deutsch.js") == -1) {
    document.getElementsByTagName("script")[0].src = "hallo_deutsch.js";
  }
  hallo();
}
</script>
</head><body>
<a href="javascript:englisch()">englisches Hallo-Welt</a><br>
<a href="javascript:deutsch()">deutsches Hallo-Welt</a>
</body></html>

Erl�uterung:

F�r dieses Beispiel wurden zwei externe JavaScript-Dateien definiert. Beide Dateien enthalten die gleich Funktion Hallo(). Sie unterscheiden sich jedoch darin, dass in der Datei hallo_deutsch.js die Ausgabe in Deutsch erfolgt und in der Datei hallo_englisch.js in Englisch.

Im Beispiel gibt es zwei Script-Bereiche. Im ersten Bereich wird unter Verwendung der src-Eigenschaft das externes JavaScript hallo_deutsch.js geladen. Im zweiten Bereich sind die Funktionen englisch() und deutsch() notiert. Der Verweis englisches Hallo-Welt ruft die Funktion englisch() auf. Innerhalb der Funktion wird gepr�ft, ob dem ersten script-Element die Datei hallo_englisch.js als src-Eigenschaft zugewiesen ist. Ist dies nicht der Fall, so erh�lt dieses Element die Datei hallo_englisch.js zugewiesen und die Datei wird geladen. Die Funktion hallo() gibt jetzt die englische Meldung aus. Wird umgekehrt auf den Verweis deutsches Hallo-Welt geklickt, so wird gepr�ft, ob die Datei hallo_deutsch.js zugewiesen wurde und die Eigenschaft gegebenenfalls ge�ndert. Die Ausgabe erfolgt dann in deutscher Sprache.

Beachten Sie:

Opera bis Version 7.54, Netscape, Mozilla Firefox, Konqueror und Safari 1.2 interpretieren die neu zugewiesene Datei nicht.

Die Verwendung von Universaleigenschaften ist im HTML-4.0-Standard f�r das script-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

Der Internet Explorer 5.0 Macintosh Edition reagiert mit einer Fehlermeldung bei der Verwendung dieses Beispieles, da er auf dieses Element offenbar nicht mit document.getElementsByTagName() zugreifen kann.

Opera 5.12 interpretiert das Attribut type nicht. M�chten Sie zum Beispiel einen Script-Bereich in VBScript einf�gen, so ist hier das missbilligte language-Attribut zur Sprachangabe zwingend erforderlich, da der Browser sonst Fehlermeldungen erzeugt, da er als Default-Sprache JavaScript verwendet.

 select (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: select
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente select haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
disabled		Auswahlliste kann nicht benutzt werden
form		zugeh�riges Formularelement
length		Anzahl der option-Elemente
multiple		Mehrfachauswahl setzen oder nicht setzen
name		Name der Auswahlliste
options		Array der option-Elemente der Auswahlliste
selectedIndex		Index des ausgew�hlten Eintrags
size		Anzahl der sichtbaren Eintr�ge
tabIndex		Tabulatorenreihenfolge
type		Typ der Auswahlliste: entweder select-multiple oder select-one
value		Aktueller Auswahlwert
Methode		Bedeutung
add()		Eintrag zur Auswahlliste hinzuf�gen
blur()		Fokus aus der Auswahlliste entfernen
focus()		Fokus auf die Auswahlliste setzen
remove()		Eintrag aus der Auswahlliste l�schen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Wert = 1;
function hinzu () {
  var Auswahlliste = document.getElementsByName("Auswahl")[0];
  var Eintrag = document.createElement("option");
  Eintrag.text = document.getElementsByName("Eingabe")[0].value;
  Eintrag.value = Wert;
  var FolgendeOption = null;
  if (document.all)
    FolgendeOption = Auswahlliste.length;
  Auswahlliste.add(Eintrag, FolgendeOption);
  Wert += 1;
}
</script>
</head><body>
<form name="Formular" action="">
<select name="Auswahl" size="10">
<option value="0">Liste</option>
</select><br>
Eintrag: <input type="text" name="Eingabe" size="30">
<input type="button" value="hinzuf�gen" onclick="hinzu()">
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Klick-Button. Klickt der Anwender auf den Button, wird der im Eingabefeld eingegebene Wert dynamisch der Auswahlliste als Eintrag hinzugef�gt. Dazu wird die JavaScript- Funktion hinzu() aufgerufen, die im Dateikopf notiert ist.

Die Methode add() erwartet als ersten Parameter ein option-Elementobjekt als neuen Listeneintrag und als zweiten Parameter das option-Elementobjekt, vor dem der neue Eintrag eingef�gt werden soll. Der zweite Parameter kann auch den Wert null, wenn der Eintrag an das Ende der Auswahlliste angeh�ngt werden soll.

Zun�chst muss also mit mit  document.createElement() ein neues option-Element erzeugt werden. Das Element wird in der Variablen Eintrag gespeichert. Seinen sichtbaren Text bekommt es mit Eintrag.text zugewiesen. Dabei wird mit document.getElementsByName("Eingabe")[0].value auf den Wert des Eingabefeldes zugegriffen. Auch einen Absendewert value erh�lt der Eintrag. Dazu wird die Variable Wert verwendet, die den Startwert 1 besitzt.

Anschlie�end wird der Wert null in der Variable FolgendeOption gespeichert, dies wird sp�ter der zweite Parameter der Funktion add(). Allerdings setzt der Internet Explorer den DOM-Standard falsch um, sodass er kein Elementobjekt oder null als zweiten Parameter erwartet, sondern die Indexnummer, die der neue Eintrag in der Liste haben soll. (Der zweite Parameter kann im Internet Explorer auch weggelassen werden.) Daher ist eine "Browserweiche" notwendig, um den Internet Explorer von den Browsern zu unterscheiden, die dem DOM-Standard folgen. �ber die  Abfrage der Existenz des Objekts  document.all wird grob in Erfahrung gebracht, ob der Browser des Anwenders dem Internet Explorer �hnelt. Wenn dies der Fall ist, wird die Variable FolgendeOption mit der Anzahl der vorhandenen Eintr�ge �berschrieben. Auf diese Weise steht der neue Eintrag auf jeden Fall am Ende der Auswahlliste. (Hinweis: Opera und Konqueror kennen das Objekt document.all ebenfalls, haben aber keine Probleme mit der Korrektur.)

Schlie�lich wird die Methode add() mit den vorbereiteten Variablen aufgerufen. Am Ende der Funktion wird noch die Variable Wert um 1 erh�ht wird, sodass jeder neue Eintrag eine h�here Nummer als Absendewert erh�lt.

Beachten Sie:

Die Methode add() ist von der Bedienung identisch zur allgemeinen Methode  insertBefore(). Die Methode remove() erwartet als ersten Parameter die Indexnummer des zu entfernenen Eintrags.

Schon lange vor dem HTML-spezifischen DOM definierte Netscapes JavaScript eine Methode, Auswahllisten-Eintr�ge hinzuzuf�gen oder zu l�schen:  Neue Elemente in Auswahlliste einf�gen und  Elemente aus Auswahlliste l�schen. Diese Methode wird zuverl�ssiger von den Browsern unterst�tzt als die Objektmethoden add() und remove().

 small (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: small
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente small haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.mini { font-family:Small Fonts; font-size:50% }
</style>
<script type="text/javascript">
function ganzklein () {
  document.getElementsByTagName("small")[0].className = "mini";
}
</script>
</head><body>
<small onclick="ganzklein()">winzigweich!</small>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen Text, der mit <small>...</small> ausgezeichnet ist. Beim Anklicken des Textes (onclick) wird die JavaScript- Funktion ganzklein() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("small")[0] auf das erste small-Element im Dokument zu und weist ihm die className-Eigenschaft mit dem Wert mini zu. Dahinter verbirgt sich die CSS-Klasse, die im Dateikopf im Style-Bereich definiert ist.

 span (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: span
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente span haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
#diesesFormat { font-family:Arial; font-size:1.5em }
#anderesFormat { font-family:Algerian; font-size:2.5em }
</style>
<script type="text/javascript">
function aendern () {
  document.getElementById("diesesFormat").id = "anderesFormat";
}
</script>
</head><body>
<span id="diesesFormat" onclick="aendern()">Das individuelle Format</span>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen Text, der mit <span>...</span> ausgezeichnet ist. Das span-Element enth�lt au�erdem eine CSS-Bindung, da es die id mit dem Wert diesesFormat hat, f�r das im Dateikopf ein individuelles Format definiert ist. Beim Anklicken des span-Textes (onclick) wird die JavaScript- Funktion aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("diesesFormat") auf das span-Element zu und weist ihm f�r die id-Eigenschaft den neuen Wert anderesFormat zu. Auch f�r diesen ID-Wert ist im Style-Bereich eine CSS-Definition notiert. Das Beispiel bewirkt also ein einmaliges dynamisches Austauschen der CSS-Eigenschaften beim span-Element.

 strike (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: strike
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente strike haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<strike id="strike" onmouseover="alert(document.getElementById('strike').title)" title="NICHT, weil es 'deprecated' ist">Benutzen Sie dieses Element!</strike>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen Text, der mit <strike>...</strike> ausgezeichnet ist. Im einleitenden Tag ist der  Event-Handler onmouseover notiert. Beim �berfahren des durchgestrichenen Textes mit der Maus wird eine Meldung ausgegeben, und zwar der Text, der beim Element im title-Attribut notiert ist. Dazu wird mit document.getElementById('strike').title auf das Element zugegriffen. Der id-Name strike lautet nur zuf�llig genauso wie der Elementname, um zu demonstrieren, dass dies durchaus erlaubt ist.

 strong (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: strong
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente strong haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-size:160%; color:blue; }
.extra { font-size:160%; color:red; background-color:yellow; }
</style>
<script type="text/javascript">
function wechseln () {
  if (document.getElementById("stark").className == "normal") {
    document.getElementById("stark").className = "extra";
  } else {
    document.getElementById("stark").className = "normal";
  }
}
</script>
</head><body>
<p><strong id="stark" class="normal" onmouseover="wechseln()" onmouseout="wechseln()">ganz stark!</strong></p>
</body></html>

Erl�uterung:

Das Beispiel enth�lt Text, der mit <strong>...</strong> 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 extra ge�ndert, wenn nein, wird er auf normal ge�ndert. Dadurch ergibt sich der Effekt, dass sich beim �berfahren des Textes mit der Maus die CSS-Eigenschaften dynamisch �ndern.

 style (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: style
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente style haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
disabled		Stylesheet verwenden oder nicht verwenden
media		Ausgabemedium f�r das Stylesheet
type		MIME-Typ der Stylesheet-Sprache

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
h1 { font-size:2.5em; color:red; }
</style>
<script type="text/javascript">
function ohneCSS () {
  document.getElementsByTagName("style")[0].disabled = true;
}
</script>
</head><body>
<h1>Mit CSS!</h1>
<a href="javascript:ohneCSS()"><b>ohne CSS!</b></a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine �berschrift und einen Verweis. Beim Anklicken des Verweises wird die JavaScript- Funktion ohneCSS() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("style")[0] auf das erste style-Element zu und setzt dessen Eigenschaft disabled auf den booleschen Wert true ("wahr"). Dadurch werden alle in dem Style-Bereich definierten Formate f�r das Dokument ung�ltig. Die �berschrift verliert dynamisch ihre CSS-Eigenschaften.

Beachten Sie:

Safari 1.2 gew�hrt lesenden und schreibenden Zugriff auf die Eigenschaften, interpretiert �nderungen aber nicht.

 sub (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: sub
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente sub haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.getElementsByTagName('sub')[0].title)">Tief</a> und
  <sub title="ganz tief">tiefer</sub>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Wort, das mit <sub>...</sub> ausgezeichnet ist, und einen Verweis. Beim Anklicken des Verweises wird in einem Meldungsfenster der Wert des title-Attributs aus dem sub-Element ausgegeben. Dazu wird mit document.getElementsByTagName('sub')[0] auf das erste sub-Element der Datei zugegriffen.

 sup (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: sup
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente sup haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Vertauschen () {
  var swap = document.getElementById("Basis").firstChild.nodeValue;
  document.getElementById("Basis").firstChild.nodeValue =
    document.getElementById("Exponent").firstChild.nodeValue;
  document.getElementById("Exponent").firstChild.nodeValue = swap;
}
</script>
</head><body><span style="font-size:200%">
<a id="Basis" href="javascript:Vertauschen()">x</a><sup id="Exponent">y</sup>
</span></body></html>

Erl�uterung:

Das Beispiel stellt einen Text "x hoch y" dar. Das "x" ist dabei in einen Verweis eingeschlossen, bei dessen Anklicken die JavaScript- Funktion Vertauschen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift sowohl auf das Verweis-Element (document.getElementById("Basis")) als auch auf das sup-Element (document.getElementById("Exponent")) zu und vertauscht deren Inhalte. Der Zugriff auf die Inhalte erfolgt mit  node.nodeValue (firstChild ist ein bestimmter Knotentyp).

 table (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: table
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente table haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Tabelle
border		Rahmendicke der Tabelle
bgColor		Hintergrundfarbe der Tabelle
caption		Tabellen�berschrift-Element vorhanden oder nicht vorhanden
cellPadding		Abstand zwischen Zellenrand und Zellinhalt
cellSpacing		Abstand zwischen den Zellen untereinander
frame		Angabe, welche Rahmen der Tabelle sichtbar sein sollen
rows		Array aller Tabellenzeilen
rules		Angabe, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein sollen
summary		Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe erl�utert
tBodies		Array aller tbody-Elemente der Tabelle
tFoot		Tabellenfu�-Element oder null
tHead		Tabellenkopf-Element oder null
width		Breite der Tabelle
Methode		Bedeutung
createCaption()		Tabellen�berschrift-Element caption erzeugen
createTFoot()		Tabellenfu�-Element tfoot erzeugen
createTHead()		Tabellenkopf-Element thead erzeugen
deleteCaption()		Tabellen�berschrift-Element caption l�schen
deleteTFoot()		Tabellenfu�-Element tfoot l�schen
deleteTHead()		Tabellenkopf-Element thead l�schen
deleteRow()		Tabellenzeile l�schen
insertRow()		Tabellenzeile hinzuf�gen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeile = 0;
function ZeileEinfuegen () {
  if (Zeile == 0)
    document.getElementById("Tabelle").deleteRow(0);
  var TR = document.getElementById("Tabelle").insertRow(Zeile);
  Zeile += 1;
  var TD1 = document.createElement("td");
  var TD1text = document.createTextNode(document.Formular.linkerText.value);
  TD1.appendChild(TD1text);
  var TD2 = document.createElement("td");
  var TD2text = document.createTextNode(document.Formular.rechterText.value);
  TD2.appendChild(TD2text);
  TR.appendChild(TD1);
  TR.appendChild(TD2);
  document.Formular.linkerText.value = "";
  document.Formular.rechterText.value = "";
}

function Rahmen () {
  if (document.getElementsByName("Option")[0].checked == true) {
    document.getElementById("Tabelle").border = "2";
  } else {
    document.getElementById("Tabelle").border = "0";
  }
}

function Farbe () {
  if (document.getElementsByName("Option")[1].checked == true) {
    document.getElementById("Tabelle").bgColor = "#CCCCFF";
  } else {
    document.getElementById("Tabelle").bgColor = "";
  }
}
</script>
</head><body>
<form name="Formular" action="">
<input type="text" name="linkerText">
<input type="text" name="rechterText">
<input type="button" value=" OK " onclick="ZeileEinfuegen()"><br>
<input type="checkbox" name="Option" onclick="Rahmen()"> Rahmen
<input type="checkbox" name="Option" onclick="Farbe()"> Hintergrund
</form>
<table id="Tabelle">
<tr><td>Eine Tabelle</td></tr>
</table>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular und unterhalb davon eine einzeilige Tabelle. Das Formular besteht aus zwei Eingabefeldern, einem Klick-Button und zwei Checkboxen. Die beiden Eingabefelder dienen dazu, um die Tabelle mit neuem Inhalt zu f�llen. Gibt der Anwender in beiden Feldern etwas ein und klickt dann auf den Klick-Button, wird die JavaScript- Funktion ZeileEinfuegen() aufgerufen, die im Dateikopf notiert ist. Beim ersten Aufruf der Funktion - die Variable Zeile ist hier noch 0 - wird mit document.getElementById("Tabelle").deleteRow(0) die vorhandene Tabellenzeile gel�scht.
Mit document.getElementById("Tabelle").insertRow(Zeile) greift die Funktion auf die Tabelle zu und f�gt ihr mit insertRow() eine neue Zeile ein. Der �bergebene Wert Zeile bestimmt, an welcher Stelle der Tabelle die neue Zeile eingef�gt werden soll. Da die Variable Zeile anschlie�end um 1 erh�ht wird, wird beim n�chsten Aufruf der Funktion die Zeile unterhalb der letzten Zeile hinzugef�gt.
Der R�ckgabewert von insertRow() ist das neu erzeugte tr-Element f�r die Tabellenzeile. Das Element wird in der Variablen TR gespeichert.
Um die Tabellenzeile mit Inhalt zu f�llen, werden zwei Tabellenzellen erzeugt. Die Elemente werden mit  document.createElement() erzeugt. F�r die Inhalte der Tabellenzellen werden mit  document.createTextNode() zwei Textknoten erzeugt, die als Wert die Inhalte der beiden Eingabefelder des Formulars zugewiesen bekommen.
Mit der Methode  node.appendChild() werden die Textknoten als Kindknoten zu den Tabellenzellen hinzugef�gt, und anschlie�end werden mit der gleichen Methode die Tabellenzelle als Kindknoten zu der Tabellenzeile hinzugef�gt.

Die beiden Checkboxen rufen beim Anklicken (onclick) die Funktionen Rahmen() bzw. Farbe() auf. Dort wird jeweils �berpr�ft, ob die Checkboxen angekreuzt sind (checked) oder nicht. Dann wird mit document.getElementById("Tabelle") auf die Tabelle zugegriffen und abh�ngig davon, ob die Checkbox angekreuzt ist oder nicht, deren Eigenschaften f�r border bzw. bgColor dynamisch ge�ndert.

Beachten Sie:

Safari interpretiert die Eigenschaft border nicht.

 tbody (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: tbody
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tbody haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Zellen des Tabellenbereichs
ch		Ausrichtungszeichen f�r Zellen des Tabellenbereichs
chOff		Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows		Array aller Tabellenzeilen des Tabellenbereichs
vAlign		vertikale Ausrichtung der Zellen im Tabellenbereich
Methode		Bedeutung
deleteRow()		Tabellenzeile aus Tabellenbereich l�schen
insertRow()		Tabellenzeile im Tabellenbereich hinzuf�gen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function rechts () {
  document.getElementById("Tabellendaten").align = "right";
}
</script>
</head><body>
<table border="1">
<thead>
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
</thead>
<tbody id="Tabellendaten">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</tbody>
</table>
<a href="javascript:rechts()">rechts ausrichten</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle mit ausgewiesenem tbody-Bereich. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Funktion rechts() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Tabellendaten") auf das tbody-Element zu und �ndert dessen Eigenschaft align auf den Wert right. Dadurch werden alle Tabellenzellen imd tbody-Bereich rechtsb�ndig ausgerichtet.

Beachten Sie:

Mit dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

 td (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: td
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente td haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
abbr		Hinweistext f�r die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align		Ausrichtung
axis		Liste von Kategorien, zu der die Zelle geh�rt
bgColor		Hintergrundfarbe
cellIndex		Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)
ch		Ausrichtungszeichen
chOff		Position des Ausrichtungszeichens
colSpan		Anzahl Spalten, �ber die sich die Zelle erstreckt
headers		Liste von ID-Namen von Zeilen- oder Spalten�berschriften, zu denen die Zelle geh�rt
height		Zellenh�he (Zeilenh�he)
noWrap		Automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch
rowSpan		Anzahl Tabellenzeilen, �ber die sich die Zelle erstreckt
scope		f�r welche restlichen Zeilen oder Spalten die aktuelle Zelle �berschriftencharakter hat
vAlign		vertikale Ausrichtung
width		Zellenbreite (Spaltenbreite)

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table cellspacing="2" border="2">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Farben = new Array("#CCFFCC", "#CCCCFF", "FFCCCC", "FFCCFF", "FFFFCC");
for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
  var index = parseInt((Math.random() * 100) % (Farben.length - 1));
  document.getElementsByTagName("td")[i].bgColor = Farben[index];
}
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird in einer  for-Schleife der Reihe nach mit document.getElementsByTagName("td") auf alle td-Elemente der Datei zugegriffen. Durch Aufruf von  Math.random() werden Zufallszahlen ermittelt, die mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion  parseInt() so getrimmt werden, dass es ganzzahlige Zufallszahlen werden, die sich als Index f�r den zuvor definierten Array Farben eignen. Mit document.getElementsByTagName("td")[i].bgColor wird schlie�lich die Hintergrundfarbe der jeweils aktuellen Tabellenzelle auf einen zuf�llig ermittelten Farbwert gesetzt. Die Tabelle wird auf diese Weise sch�n bunt, und jede Zelle erh�lt eine per Zufall ausgesuchte Hintergrundfarbe.

 textarea (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: textarea
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente textarea haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
accessKey		Hotkey f�r das Element
cols		Zeichen pro Zeile (Anzeigebreite)
defaultValue		vorbelegter Wert
disabled		Element kann nicht ge�ndert werden
form		zugeh�riges Formular
name		Name des Elements
readOnly		Wert des Elements kann nicht ver�ndert werden
rows		Zeilen (Anzeigeh�he)
tabIndex		Tabulator-Reihenfolge
type		Typ des Formularelements
value		Wert des Elements
Methode		Bedeutung
blur()		Fokus vom Element entfernen
focus()		Fokus auf Element setzen
select()		Inhalt selektieren

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function setText () {
  document.getElementById("Text").firstChild.nodeValue = document.getElementById("Eingabe").value;
}
</script>
</head><body>
<form name="Formular" action="">
Text:<br>
<textarea id="Eingabe" rows="10" cols="50"
onkeyup="setText()"></textarea>
</form>
<div id="Text" style="font-size:1.4em; background-color:#FFFFCC; padding:10px;
border:solid 1px red">&nbsp;</div>
</body></html>

Erl�uterung:

Das Beispiel enth�lt ein Formular mit einem textarea-Eingabebereich. Unterhalb des Formulars ist ein schick formatierter div-Bereich notiert, der als Inhalt aber zun�chst nur ein erzwungenes Leerzeichen   enth�lt. Im einleitenden <textarea>-Tag ist der  Event-Handler onkeyup notiert. Wenn der Anwender in dem Feld etwas eingibt, wird bei jedem Loslassen eines Tastendrucks die JavaScript- Funktion setText() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Text").firstChild.nodeValue auf den Inhalt des div-Elements zu und weist diesem den Wert des Eingabefeldes (document.getElementById("Eingabe").value) zu. Somit wird in den div-Bereich dynamisch der Text geschrieben, den der Anwender im Textfeld eingibt.

 tfoot (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: tfoot
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tfoot haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Zellen des Tabellenbereichs
ch		Ausrichtungszeichen f�r Zellen des Tabellenbereichs
chOff		Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows		Array aller Tabellenzeilen des Tabellenbereichs
vAlign		vertikale Ausrichtung der Zellen im Tabellenbereich
Methode		Bedeutung
deleteRow()		Tabellenzeile aus Tabellenbereich l�schen
insertRow()		Tabellenzeile im Tabellenbereich hinzuf�gen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<tfoot id="Fuss" valign="top">
<tr><td colspan="2" height="40">
Angaben ohne Gew�hr!
</td></tr></tfoot>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Ausrichtung = document.getElementById("Fuss").vAlign;
document.write("Angaben ohne Gew�hr haben die Ausrichtung: " + Ausrichtung);
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle mit einem ausgewiesenen tfoot-Bereich. Unterhalb der Tabelle ist ein JavaScript-Bereich notiert. Darin wird mit document.getElementById("Fuss").vAlign auf das tfoot-Element zugegriffen und der Wert von dessen Eigenschaft vAlign ausgelesen. Anschlie�end wird das Ergebnis ins Dokument geschrieben.

 th (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: th
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente th haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
abbr		Hinweistext f�r die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align		Ausrichtung
axis		Liste von Kategorien, zu der die Zelle geh�rt
bgColor		Hintergrundfarbe
cellIndex		Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)
ch		Ausrichtungszeichen
chOff		Position des Ausrichtungszeichens
colSpan		Anzahl Spalten, �ber die sich die Zelle erstreckt
headers		Liste von ID-Namen von Zeilen- oder Spalten�berschriften, zu denen die Zelle geh�rt
height		Zellenh�he (Zeilenh�he)
noWrap		Automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch
rowSpan		Anzahl Tabellenzeilen, �ber die sich die Zelle erstreckt
scope		f�r welche restlichen Zeilen oder Spalten die aktuelle Zelle �berschriftencharakter hat
vAlign		vertikale Ausrichtung
width		Zellenbreite (Spaltenbreite)

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
for (var i = 0; i < document.getElementsByTagName("th").length; i++)
  document.getElementsByTagName("th")[i].align = "left";
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort werden in einer  for-Schleife der Reihe nach alle th-Elemente des Dokuments ermittelt. Ihnen wird f�r die Eigenschaft align der Wert left zugewiesen.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

 thead (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: thead
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente thead haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Zellen des Tabellenbereichs
ch		Ausrichtungszeichen f�r Zellen des Tabellenbereichs
chOff		Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows		Array aller Tabellenzeilen des Tabellenbereichs
vAlign		vertikale Ausrichtung der Zellen im Tabellenbereich
Methode		Bedeutung
deleteRow()		Tabellenzeile aus Tabellenbereich l�schen
insertRow()		Tabellenzeile im Tabellenbereich hinzuf�gen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<thead id="Kopf">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
</thead>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Zeilen = document.getElementById("Kopf").rows.length;
document.write("Tabellenkopf hat " + Zeilen + " Zeilen");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort wird mit document.getElementById("Kopf").rows.length die Anzahl der Tabellenzeilen im Bereich des thead-Elements ermittelt und anschlie�end ins Dokument geschrieben.

Beachten Sie:

Safari z�hlt in obigen Beispiel bei der Eigenschaft rows fehlerhaft die Zeilen der gesamten Tabelle, nicht nur die Zeilen des Tabellenkopfes.

 title (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: title
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente title haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgende eigenen Eigenschaft.

Eigenschaft	Status	Bedeutung
text		Inhalt des Titels

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Ein ganz besonderer Tag</title>
</head><body>
<script type="text/javascript">
document.write("<h1>" + document.getElementsByTagName("title")[0].text + "<\/h1>");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen JavaScript-Bereich, in dem dynamisch eine �berschrift erster Ordnung ins Dokument geschrieben wird. �berschriftentext wird der Inhalt des title-Elements geschrieben. Dazu wird mit document.getElementsByTagName("title")[0] auf das title-Element zugegriffen.

 tr (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: tr
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tr haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft	Status	Bedeutung
align		Ausrichtung der Zellen der Tabellenzeile
bgColor		Hintergrundfarbe der Zellen der Tabellenzeile
cells		Array der Tabellenzellen dieser Tabellenzeile
ch		Ausrichtungszeichen f�r Zellen der Tabellenzeile
chOff		Position des Ausrichtungszeichens in Zellen der Tabellenzeile
rowIndex		Indexnummer der Tabellenzeile (startend bei 0) relativ zur Tabelle
sectionRowIndex		Indexnummer der Tabellenzeile (startend bei 0) relativ zum Tabellenbereich (thead, tbody oder tfoot)
vAlign		vertikale Ausrichtung der Zellen im Tabellenbereich
Methode		Bedeutung
deleteCell()		Tabellenzelle aus Tabellenzeile l�schen
insertCell()		Tabellenzelle in Tabellenzeile hinzuf�gen

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zelle = 0;
function neueZelle () {
  if (Zelle == 0)
    document.getElementById("Zeile").deleteCell(0);
  var Text = document.createTextNode(document.Formular.Eingabe.value);
  var TD = document.getElementById("Zeile").insertCell(Zelle);
  Zelle += 1;
  TD.appendChild(Text);
  document.Formular.Eingabe.value = "";
}
</script>
</head><body>
<table border="1">
<tr id="Zeile"><td>Zelle</td></tr>
</table>
<form name="Formular" action="">
<input type="text" name="Eingabe">
<input type="button" value=" OK " onclick="neueZelle()">
</form>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Tabelle mit einer einspaltigen Tabellenzeile und unterhalb der Tabelle ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird die JavaScript- Funktion neueZelle() aufgerufen wird, die im Dateikopf notiert ist. Beim ersten Aufruf der Funktion - die Variable Zelle ist hier noch 0 - wird mit document.getElementById("Zeile").deleteCell(0) die vorhandene Tabellenzelle gel�scht. Die Funktion erzeugt zun�chst mit  document.createTextNode() einen Textknoten, der als Wert den Inhalt des Formulareingabefeldes erh�lt. Anschlie�end wird mit document.getElementById("Zeile") auf die Tabellenzeile zugegriffen und mit der Methode insertCell() eine neue Tabellenzelle eingef�gt. Der �bergebene Parameter bestimmt, an wie vielter Stelle die Zelle in der Zeile eingef�gt wird. Im Beispiel wird dazu die Variable Zelle benutzt, die bei jedem Funktionsaufruf um 1 erh�ht wird. So ist sichergestellt, dass neue Zellen immer ans Ende der Zeile angeh�ngt werden.
Der R�ckgabewert von insertCell() ist das neu erzeugte td-Element. Es wird in der Variablen TD gespeichert. Mit der Methode  node.appendChild() wird der zuvor erzeugte Textknoten in das td-Element als Kindknoten hinzugef�gt. Die Tabellenzeile ist damit dynamisch um das neue Zellenelement erweitert worden.

 tt (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: tt
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tt haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<tt title="ein Teletyper!"
onmouseover="alert(document.getElementsByTagName('tt')[0].title)">Was bin ich?</tt>
</body></html>

Erl�uterung:

Das Beispiel enth�lt mit <tt>...</tt> ausgezeichneten Text, der den  Event-Handler onmouseover enth�lt. Beim �berfahren des Textes mit der Maus wird in einem Meldungsfenster der Wert des title-Attributs des Elements ausgegeben. Dazu wird mit document.getElementsByTagName('tt')[0] auf das Element zugegriffen.

 u (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: u
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente u haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Ein ganz besonderer Tag</title>
<style type="text/css">
.so { text-decoration:overline; }
</style>
<script type="text/javascript">
function anders () {
  document.getElementById("uText").className = "so";
}
</script>
</head><body>
<u id="uText" onclick="anders()">das ist der Text</u>
</body></html>

Erl�uterung:

Das Beispiel enth�lt unterstrichenen Text. Im einleitenden <u>-Tag ist der  Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Funktion anders() aufgerufen. Diese greift mit document.getElementById("uText") auf das u-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse so zu. Der Text wird dadurch �berstrichen statt unterstrichen dargestellt.

Beachten Sie:

Im Internet Explorer 5.0 wird als Ergebnis des Funktionsaufrufes der Text sowohl unterstrichen als auch �berstrichen dargestellt. Netscape 6.1 und der Internet Explorer 5.5 verhalten sich dagegen wie im Beispiel beschrieben.

 ul (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: ul
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ul haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft	Status	Bedeutung
compact		Darstellung in enger Schrift
type		Art des Aufz�hlungszeichens

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Bullet (Symbol) {
  document.getElementById("Liste").type = Symbol;
}
</script>
</head><body>
<ul id="Liste">
<li>ein Punkt</li>
<li>und noch ein Punkt</li>
</ul>
<a href="javascript:Bullet('disc')">Disc-Symbol</a>
<a href="javascript:Bullet('square')">Square-Symbol</a>
</body></html>

Erl�uterung:

Das Beispiel enth�lt eine Aufz�hlungsliste. Unterhalb davon sind zwei Verweise notiert. Bei Anklicken der Verweise wird jeweils die JavaScript- Funktion Bullet() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Liste") auf das ul-Element der Liste zu und weist seiner Eigenschaft type den Wert zu, den die Funktion beim Aufruf von den Verweisen �bergeben bekommen hat.

 var (HTML-Elementobjekt)

HTML-Referenz: siehe  Element: var
Auf HTML-Elementobjekte zugreifen: siehe  HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente var haben als DOM-Objekte f�r den Script-Sprachenzugriff  Universaleigenschaften.

Beispiel:

 Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
Datei: <var id="datei" title="/usr/docs/web/projekte/dateiname.html">dateiname.html</var><br>
genauer:
<script type="text/javascript">
document.write("<var>" + document.getElementById("datei").title + "<\/var>");
</script>
</body></html>

Erl�uterung:

Das Beispiel enth�lt einen mit <var>...</var> ausgezeichneten Text. Unterhalb ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("datei") auf das var-Element zugegriffen und der Wert von dessen Eigenschaft title dynamisch ins Dokument geschrieben.

	node
	document
SELFHTML/Navigationshilfen  JavaScript/DOM  Objektreferenz

© 2007  Impressum