# 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 `&nbsp;` 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

© 2007 Impressum