SELFHTML

HTML-Elementobjekte

Informationsseite

nach unten HTML-Elementobjekte: Allgemeines zur Verwendung
nach unten Universaleigenschaften (Wert von Universalattributen)

Elementobjekte

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

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.

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:

nach unten a
nach unten applet
nach unten form
nach unten frame
nach unten img
nach unten input
nach unten iframe
nach unten map
nach unten meta
nach unten object
nach unten param
nach unten select
nach unten textarea

Mit der Methode Seite 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 Seite 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 Seite 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 Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Universaleigenschaften

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 a (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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-Seite 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 Seite node.nodeValue (firstChild ist bezeichnet den ersten Kindknoten eines Knotens).

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xOpera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 abbr (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: abbr
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente abbr haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onmouseover und onmouseout, die jeweils die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 acronym (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: acronym
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente acronym haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 address (HTML-Elementobjekt)

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

HTML-Elemente address haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Namen () {
  document.getElementsByTagName("address")[0].firstChild.nodeValue = "Stefan Münz";
}

function Text () {
  document.getElementsByTagName("address")[0].firstChild.nodeValue = "SELFHTML-Redaktion";
}
</script>
</head><body>
<div>Dies alles ist von der
<address onmouseover="Namen()" onmouseout="Text()">SELFHTML-Redaktion</address><div>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit der Adressbezeichnung SELFHTML-Redaktion, die mit <address>...</address> ausgezeichnet ist. Das einleitende Tag enthält die Seite Event-Handler onmouseover und onmouseout, die jeweils eine JavaScript-Seite 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 Seite node.nodeValue gesetzt (firstChild bezeichnet den ersten Kindknoten eines Knotens).

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 8Mozilla Firefox 1Konqueror 3.1Safari 1.0 applet (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: applet
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente applet haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
 <param name="msg" value="Die Energie des Verstehens">
 <param name="speed" value="5">
 <param name="bgco" value="255,255,255">
 <param name="txtco" value="000,000,255">
 <param name="hrefco" value="255,255,255">
</applet>
<form name="Form" action="">
<input type="button" value="40" onclick="document.getElementById('Ticker').height = 40">
<input type="button" value="60" onclick="document.getElementById('Ticker').height = 60">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein eingebundenes Java-Applet für einen Lauftext (Ticker). Unterhalb des Applets ist ein Formular mit einem Eingabefeld notiert. Klickt der Anwender auf die Buttons, wird dynamisch die Anzeigehöhe des Java-Applets geändert, und der Lauftext ändert dabei automatisch seine Größe (sofern das Applet so programmiert ist, dass die Größe des Lauftextes von dem Attribut height im einleitenden <applet>-Tag abhängig ist). Mit document.getElementById('Ticker') wird auf das Applet zugegriffen, da es im einleitenden Tag das Attribut id="Ticker" hat. Geändert wird sein Attribut height.

Beachten Sie:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 area (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: area
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente area haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 b (HTML-Elementobjekt)

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

HTML-Elemente b haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0MS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 base (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: base
Auf HTML-Elementobjekte zugreifen: siehe nach oben 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 Lesen/Ändern Basis-URI
target Lesen/Ändern Default Zielfenster für Verweise

Beispiel:

Beispiel-Seite 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-Seite Funktion blankBase() auf, die beim base-Element die Eigenschaft target auf den Wert _blank ändert, was bewirkt, dass Verweisziele dieser Datei in ein neues Fenster geladen werden.

Beachten Sie:

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

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

nach obennach unten

DOM 1.0MS IE 5.5 basefont (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: basefont
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente basefont haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft Status Bedeutung
color Lesen/Ändern Basis-Schriftfarbe
face Lesen/Ändern Basis-Schriftart
size Lesen/Ändern Basis-Schriftgröße

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1 bdo (HTML-Elementobjekt)

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

HTML-Elemente bdo haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 big (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: big
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente wie big haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 blockquote (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: blockquote
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente blockquote haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft Status Bedeutung
cite Lesen/Ändern URI der Zitatquelle

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onmouseover notiert, der bewirkt, dass beim Überfahren des Zitats mit der Maus die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 body (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Konqueror 3.1Safari 1.0 br (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: br
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente br haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft Status Bedeutung
clear Lesen/Ändern Fortsetzungsposition bei Textumfluss

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 button (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick enthält. Beim Anklicken des Buttons wird deshalb die JavaScript-Seite Funktion ZeitAufButton() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt mit Hilfe des Seite 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.

nach obennach unten

DOM 1.0MS IE 5.5Opera 7.20Mozilla Firefox 1 caption (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick. Dadurch wird beim Anklicken der Tabellenüberschrift die JavaScript-Seite Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("THeader") auf die Tabellenüberschrift zu und fragt ab, ob deren align-Eigenschaft den Wert left hat. Wenn ja, wird er auf right geändert, wenn nein (also wenn er auf right gesetzt ist), wird er wieder auf left gesetzt. Auf diese Weise springt die Tabellenüberschrift bei jedem Anklicken zur anderen Seite (links bzw. rechts).

Beachten Sie:

Mit Netscape 6.1, Konqueror 3.4 und dem Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem caption-Element nicht nachvollziehbar.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 center (HTML-Elementobjekt)

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

HTML-Elemente center haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 cite (HTML-Elementobjekt)

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

HTML-Elemente cite haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 code (HTML-Elementobjekt)

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

HTML-Elemente code haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 col (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: col
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente col haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

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

Beispiel:

Beispiel-Seite 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-Seite Funktion gleichbreit() aufgerufen wird. Diese greift in einer Seite 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.

nach obennach unten

DOM 1.0MS IE 5.5Opera 7 colgroup (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.2 dd (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dd
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dd haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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-Seite Funktion Titel() aufgerufen, die im Dateikopf notiert ist. Diese greift in einer Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 del (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: del
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente del haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft Status Bedeutung
cite Lesen/Ändern URI für Gründe der Änderung
dateTime Lesen/Ändern Datum und Uhrzeit der Änderung

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 dfn (HTML-Elementobjekt)

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

HTML-Elemente dfn haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0 dir (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
compact Lesen/Ändern Darstellung in enger Schrift

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 div (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung

Beispiel:

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

nach obennach unten

DOM 1.0 dl (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
compact Lesen/Ändern Darstellung in enger Schrift

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 dt (HTML-Elementobjekt)

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

HTML-Elemente dt haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick. Beim Anklicken der Elemente wird jeweils die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 em (HTML-Elementobjekt)

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

HTML-Elemente em haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onmouseover und onmouseout. In einem Fall wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 6Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 fieldset (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
form Lesen zugehöriges Formularelement

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onmouseover notiert, der die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 font (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
color Lesen/Ändern Schriftfarbe
face Lesen/Ändern Schriftart
size Lesen/Ändern Schriftgröße

Beispiel:

Beispiel-Seite 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-Seite Funktion Spielen() aufgerufen. Zuvor wurden bereits diverse Seite Arrays angelegt. Die Funktion Spielen ermittelt mittels Seite Math.random() Zufallszahlen und trimmt diese mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion Seite 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 (Seite window.setTimeout()) und ruft sich dann selber wieder auf. Dadurch ergibt sich ein endloses Spiel an zufälligen Textänderungen.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0  form (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0Opera 7.20 frame (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onload. Nach dem Laden des Framesets wird die JavaScript-Seite 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:

Netscape 4 kennt die im Beispiel verwendete Methode getElementById() nicht, aber auch nicht die marginHeight- und marginWidth-Eigenschaft, wie der alternative Zugriff über window.frames zeigt. 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.

nach obennach unten

DOM 1.0Netscape 6.0MS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.3 frameset (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
cols Lesen/Ändern Breitenverhältnisse für spaltenartig angeordnete Frame-Fenster
rows Lesen/Ändern Höhenverhältnisse für reihenartig angeordnete Frame-Fenster

Beispiel:

Beispiel-Seite 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 Seite document.createElement() ein neues Element erzeugt, dem mit Seite setAttribute() eine anzuzeigende Datei zugewiesen wird. Anschließend wird der neue Elementknoten mit Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1 h1-h6 (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung

Beispiel:

Beispiel-Seite 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-Seite Funktion rechtslinks() aufgerufen wird, die im Dateikopf steht. Diese greift in einer Seite 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.1 nicht nachvollziehbar.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.50Mozilla Firefox 1Konqueror 3.1Safari 1.0 head (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
profile Lesen/Ändern URI für Metadaten-Profil

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.2 hr (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung der Trennlinie
noShade Lesen/Ändern Trennlinie wird flach und ohne 3D-Effekt dargestellt
size Lesen/Ändern Dicke der Trennlinie
width Lesen/Ändern Länge der Trennlinie

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick. Beim Anklicken der Trennlinie wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 html (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
version Lesen/Ändern HTML-Sprachversion

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 i (HTML-Elementobjekt)

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

HTML-Elemente i haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 iframe (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 img (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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-Seite 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 Seite 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.x sind die Eigenschaften hspace, vspace und border fehlerhaft implementiert.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.10Mozilla Firefox 1Konqueror 3.1Safari 1.0 input (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onkeypress. Bei jedem Tastendruck, der erfolgt, während das Eingabefeld den Fokus hat, wird darum die JavaScript-Seite 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.

nach obennach unten

DOM 1.0Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 ins (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
cite Lesen/Ändern URI für Gründe des Einfügens
dateTime Lesen/Ändern Datum und Uhrzeit des Einfügens

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Safari 1.0 isindex (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
form Lesen zugehöriges Formular
prompt Lesen/Ändern Labeltext

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 6Mozilla Firefox 1Safari 1.2 kbd (HTML-Elementobjekt)

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

HTML-Elemente kbd haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onkeypress. Wenn das Dokument den Fokus hat und der Anwender irgendeine Taste drückt, wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 label (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
accessKey Lesen/Ändern Hotkey für das zugehörige Element
form Lesen zugehöriges Formular
htmlFor Lesen/Ändern Id des Elements, zu dem das Label gehört

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Mozilla Firefox 1Konqueror 3.1Safari 1.2 legend (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
accessKey Lesen/Ändern Hotkey für das Element
align Lesen/Ändern Ausrichtung
form Lesen zugehöriges Formular

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 li (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
type Lesen/Ändern Aufzählungszeichen oder der Nummerierungstyp
value Lesen/Ändern Wert der laufenden Nummerierung neu setzen

Beispiel:

Beispiel-Seite 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-Seite Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion geht in einer Seite 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.

nach obennach unten

DOM 1.0Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 link (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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-Seite 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 6.1 und dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

nach obennach unten

DOM 1.0Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 map (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
areas Lesen/Ändern Array der nach oben area-Definitionen
name Lesen/Ändern Ankername des Definitionsbereichs

Beispiel:

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

nach obennach unten

DOM 1.0 menu (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
compact Lesen/Ändern Darstellung in enger Schrift

Beispiel:

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

nach obennach unten

DOM 1.0 meta (HTML-Elementobjekt)

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

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

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

Beispiel:

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

Beachten Sie:

Das Beispiel liest die Eigenschaften nur. Für schreibenden Zugriff, der auch noch sinnvoll irgendetwas tut, ist uns kein schlaues Beispiel eingefallen. Wenn Sie in der Praxis auf einen Anwendungsfall treffen, bei dem Meta-Angaben mit JavaScript geändert werden, dann benachrichtigen Sie uns doch bitte über das Seite Kontaktformular.

nach obennach unten

DOM 1.0Opera 5.12 noframes (HTML-Elementobjekt)

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

HTML-Elemente noframes haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0Opera 5.12 noscript (HTML-Elementobjekt)

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

HTML-Elemente noscript haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.60Mozilla Firefox 1Konqueror 3.1Safari 1.0 object (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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-Seite 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 6.1 war dieses Beispiel nicht nachvollziehbar, Opera beherrscht es ab Version 7.60.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1 ol (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
compact Lesen/Ändern Darstellung in enger Schrift
start Lesen/Ändern Startwert für die Nummerierung
type Lesen/Ändern Art der Nummerierung

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 optgroup (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
disabled Lesen/Ändern Gruppe von Einträgen kann nicht ausgewählt werden
label Lesen/Ändern Text des Gruppeneintrags

Beispiel:

Beispiel-Seite 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.x 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 option (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 p (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 param (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
name Lesen/Ändern Name des Parameters
type Lesen/Ändern MIME-Typ des Wertes
value Lesen/Ändern Initialisierungswert für den Parameter
valueType Lesen/Ändern Informationen zum Attribut type

Beispiel:

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

nach obennach unten

DOM 1.0 pre (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
width Lesen/Ändern feste Breite für Inhalt

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 q (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
cite Lesen/Ändern URI für die Quelle des Zitats

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 s (HTML-Elementobjekt)

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

HTML-Elemente s haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 samp (HTML-Elementobjekt)

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

HTML-Elemente samp haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0MS IE 5.5Opera 7.60 script (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
charset Lesen/Ändern Zeichenkodierung der bei src angegebenen Scriptdatei
defer Lesen/Ändern Script kann keine Inhalte im Dokumentfenster ändern oder erzeugen
event Lesen/Ändern Ereignis für Scriptausführung
htmlFor Lesen/Ändern Element, für das das Script ausgeführt wird
src Lesen/Ändern URI einer Scriptdatei
text Lesen/Ändern Inhalt des Scripts
type Lesen/Ändern 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

Beispiel-Seite 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 7.54, Netscape 6.x, 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 select (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
disabled Lesen/Ändern Auswahlliste kann nicht benutzt werden
form Lesen zugehöriges Formularelement
length Lesen Anzahl der option-Elemente
multiple Lesen/Ändern Mehrfachauswahl setzen oder nicht setzen
name Lesen/Ändern Name der Auswahlliste
options Lesen Array der option-Elemente der Auswahlliste
selectedIndex Lesen/Ändern Index des ausgewählten Eintrags
size Lesen/Ändern Anzahl der sichtbaren Einträge
tabIndex Lesen/Ändern Tabulatorenreihenfolge
type Lesen Typ der Auswahlliste: entweder select-multiple oder select-one
value Lesen/Ändern 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:

Beispiel-Seite 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-Seite 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 Seite 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, so dass 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 Seite Abfrage der Existenz des Objekts Seite 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, so dass jeder neue Eintrag eine höhere Nummer als Absendewert erhält.

Beachten Sie:

Die Methode add() ist von der Bedienung identisch zur allgemeinen Methode Seite 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: Seite Neue Elemente in Auswahlliste einfügen und Seite Elemente aus Auswahlliste löschen. Diese Methode wird zuverlässiger von den Browsern unterstützt als die Objektmethoden add() und remove().

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 small (HTML-Elementobjekt)

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

HTML-Elemente small haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 span (HTML-Elementobjekt)

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

HTML-Elemente span haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 strike (HTML-Elementobjekt)

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

HTML-Elemente strike haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 strong (HTML-Elementobjekt)

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

HTML-Elemente strong haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onmouseover und onmouseout, die jeweils die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7.20Mozilla Firefox 1Safari 1.2 style (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
disabled Lesen/Ändern Stylesheet verwenden oder nicht verwenden
media Lesen/Ändern Ausgabemedium für das Stylesheet
type Lesen/Ändern MIME-Typ der Stylesheet-Sprache

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 sub (HTML-Elementobjekt)

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

HTML-Elemente sub haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 sup (HTML-Elementobjekt)

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

HTML-Elemente sup haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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-Seite 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 Seite node.nodeValue (firstChild ist ein bestimmter Knotentyp).

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 table (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
align Lesen/Ändern Ausrichtung der Tabelle
border Lesen/Ändern Rahmendicke der Tabelle
bgColor Lesen/Ändern Hintergrundfarbe der Tabelle
caption Lesen/Ändern Tabellenüberschrift-Element vorhanden oder nicht vorhanden
cellPadding Lesen/Ändern Abstand zwischen Zellenrand und Zellinhalt
cellSpacing Lesen/Ändern Abstand zwischen den Zellen untereinander
frame Lesen/Ändern Angabe, welche Rahmen der Tabelle sichtbar sein sollen
rows Lesen Array aller Tabellenzeilen
rules Lesen/Ändern Angabe, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein sollen
summary Lesen/Ändern Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe erläutert
tBodies Lesen Array aller tbody-Elemente der Tabelle
tFoot Lesen/Ändern Tabellenfuß-Element oder null
tHead Lesen/Ändern Tabellenkopf-Element oder null
width Lesen/Ändern 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:

Beispiel-Seite 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-Seite 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 Seite document.createElement() erzeugt. Für die Inhalte der Tabellenzellen werden mit Seite document.createTextNode() zwei Textknoten erzeugt, die als Wert die Inhalte der beiden Eingabefelder des Formulars zugewiesen bekommen.
Mit der Methode Seite 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.

nach obennach unten

DOM 1.0MS IE 5.5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 tbody (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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-Seite 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 Netscape 6.1 und dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 td (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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 Seite for-Schleife der Reihe nach mit document.getElementsByTagName("td") auf alle td-Elemente der Datei zugegriffen. Durch Aufruf von Seite Math.random() werden Zufallszahlen ermittelt, die mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 textarea (HTML-Elementobjekt)

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

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

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

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onkeyup notiert. Wenn der Anwender in dem Feld etwas eingibt, wird bei jedem Loslassen eines Tastendrucks die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 tfoot (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 th (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 thead (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.3 title (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
text Lesen/Ändern Inhalt des Titels

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 tr (HTML-Elementobjekt)

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

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

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

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 tt (HTML-Elementobjekt)

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

HTML-Elemente tt haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 u (HTML-Elementobjekt)

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

HTML-Elemente u haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite 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 Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript-Seite 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.

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5Opera 7.20Mozilla Firefox 1Konqueror 3.1Safari 1.0 ul (HTML-Elementobjekt)

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

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

Eigenschaft Status Bedeutung
compact Lesen/Ändern Darstellung in enger Schrift
type Lesen/Ändern Art des Aufzählungszeichens

Beispiel:

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

nach obennach unten

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.5Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 var (HTML-Elementobjekt)

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

HTML-Elemente var haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

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

 nach oben
weiter Seite node
zurück Seite document
 

© 2005 Seite Impressum