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 = "SELFHTML-Redaktion";
}
</script>
</head><body>
<div>Dies alles ist von der
<address onmouseover="Namen()" onmouseout="Text()">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.1 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 6.1 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 6.1, Konqueror 3.4 und dem Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem caption-Element nicht nachvollziehbar.

 center (HTML-Elementobjekt)

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

HTML-Elemente center 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