SELFHTML: JavaScript / Objektreferenz / elements

SELFHTML/Quickbar JavaScript Objektreferenz

elements

elements: Allgemeines zur Verwendung

Eigenschaften:

checked (Angekreuzt)
defaultChecked (vorangekreuzt)
defaultValue (voreingegebener Wert)
form (Name des zugehörigen Formulars)
name (Elementname)
type (Elementtyp)
value (Elementwert/-inhalt)

Methoden:

blur() (Element verlassen)
click() (Element anklicken)
focus() (auf Element positionieren)
handleEvent() (Ereginis verarbeiten)
select() (Text selektieren)

Unterobjekte:

options

elements: Allgemeines zur Verwendung

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des forms-Objekts liegt, haben Sie Zugriff auf Elemente eines Formulars.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formularelement anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].elements[#].Eigenschaft
document.forms[#].elements[#].Methode()

document.forms[0].elements[0].value = "Unsinn";
document.forms[0].elements[0].blur();

Schema 2 / Beispiel 2:

document.FormularName.Elementname.Eigenschaft
document.FormularName.Elementname.Methode()

document.Testformular.Eingabe.value = "Unsinn";
document.Testformular.Eingabe.blur();

Erläuterung:

Formularelemente können Sie auf folgende Arten ansprechen:

mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, daß der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit forms[0] an, das zweite Formular mit forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe elements. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Auch dabei wird wieder bei 0 zu zählen begonnen, d.h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw.
mit Namen (wie in Schema 2 / Beispiel 2)
Dabei geben Sie mit document.FormularName.ElementName den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars und des Elements in den entsprechenden HTML-Tags im Attribut name= angegeben haben.

Beachten Sie:

Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in Wirklichkeit mehrere, allerdings sehr ähnliche JavaScript-Objekte. So gibt es Objekte für Eingabefelder, Auswahllisten, verschiedene Arten von Buttons. Alle diese Objekte werden jedoch im sogenannten "elements-Array" zusammengefaßt. Alle diese Objekte werden auf die gleiche Art und Weise angesprochen. Sie unterscheiden sich lediglich in ihren Eigenschaften und Methoden. Bei den Eigenschaften und Methoden in diesem Abschnitt ist daher immer vermerkt, für welche Objekte sie gelten. Folgende Angaben werden dabei unterschieden (die Verweise führen zu den entsprechenden Beschreibungen in der HTML-Dokumentation):

Klick-Buttons Checkboxen Datei-Buttons Versteckte Elemente Passwort-Felder Radio-Buttons Abbrechen-Buttons Absenden-Buttons einzeilige Eingabefelder mehrzeilige Eingabefelder

Bei den Eigenschaften und Methoden des elements-Objekts wird jeweils angegeben, auf welche dieser Elementtypen die Eigenschaft bzw. Methode anwendbar ist.

Gruppenelemente:

Checkboxen und Radiobuttons bilden normalerweise Gruppen mehrerer zusammengehöriger Elemente, die eine gleiche Angabe zu name= haben und sich nur durch die Angabe value= unterscheiden. Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array.

Beispiel:

document.Formular.Favoriten[2].checked = true;

Erläuterung:

Das Beispiel nimmt etwa folgende HTML-Befehle an:
input type=radio name="Favoriten" value="Heino"
input type=radio name="Favoriten" value="Gildo"
input type=radio name="Favoriten" value="Marianne"
Die Gruppe zusammengehöriger Radiobuttons hat den gleichen Namen. In JavaScript können Sie einzelne solcher Buttons ansprechen, indem Sie das Element (als Gruppe) ansprechen . Hinter dem Elementnamen notieren Sie dann in eckigen Klammern die Indexnummer des gewünschten Elements. Im Beispiel wird Favoriten[2] angesprochen. Das ist das dritte Element der Gruppe.

Beachten Sie:

Auswahllisten kommen hier nicht vor. Um mit JavaScript auf solche Listen zuzugreifen, steht das Unterobjekt options zur Verfügung.

checked

Speichert, ob bzw. daß ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

Anwendbar auf: Klick-Buttons Checkboxen Radio-Buttons

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Weiter()
{
 if(document.Testform.Art[0].checked == true)
  window.location.href="frminhalt.htm"
 else if(document.Testform.Art[1].checked == true)
  window.location.href="inhalt.htm"
 else 
  alert("Bitte eine Auswahl treffen");
}
</script>
</head><body>
<form name="Testform">
<input type=radio name="Art" value="mit"> mit Frames 
<input type=radio name="Art" value="ohne"> ohne Frames
<br><input type=button value="Starten" onClick="Weiter()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radiobuttons. Der Anwender kann dabei auswählen, ob der die folgenden Seiten des Projekts mit Frames oder ohne Frames sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radiobuttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen ( location.href). Wenn keiner der beiden Radiobuttons aktiviert ist, wird eine Fehlermeldung ausgegeben.

defaultChecked

Speichert, ob bzw. daß ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

Anwendbar auf: Checkboxen Radio-Buttons

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Weiter()
{
 if(document.Testform.Art[0].checked == true)
  window.location.href="frminhalt.htm"
 else
  window.location.href="inhalt.htm"
}
</script>
</head><body>
<form name="Testform">
<input type=radio name="Art" value="mit"> mit DHTML
<input type=radio name="Art" value="ohne"> ohne DHTML
<br><input type=button value="Starten" onClick="Weiter()">
</form>
<script language="JavaScript">
dhtml = false;
if(document.layers || document.all) dhtml = true;    
if(dhtml == true && document.Testform.Art[0].defaultChecked == false)
   document.Testform.Art[0].checked = true;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radiobuttons. Der Anwender kann dabei auswählen, ob der die folgenden Seiten des Projekts mit Dynamischem HTML oder ohne sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radiobuttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen ( location.href).
Unterhalb des Formulars ist jedoch noch ein weiterer Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob eines der für Dynamisches HTML typischen Objekte document.layers oder document.all verfügbar sind. Wenn ja, wird eine Variable dhtml auf true gesetzt. In einer weiteren Abfrage wird mit defaultChecked überprüft, ob die Auswahlmöglichkeit, DHTML zu nutzen, im Formular als Vorauswahl aktiviert ist oder nicht. Wenn nicht, und wenn DHTML aber verfügbar ist (also wenn dhtml auf truegesetzt ist), wird die Auswahlmöglichkeit für DHTML nachträglich angekreuzt.

defaultValue

Speichert den voreingestellten Text eines Eingabefeldes.

Anwendbar auf: einzeilige Eingabefelder mehrzeilige Eingabefelder

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
URL: <input size=40 name="url" value="http://www.xy.de/">
<input type=button value="Gehe zu"
onClick="window.location.href=document.Testform.url.value">
</form>
<script language="JavaScript">
if(navigator.userAgent.indexOf("en") > 0)
{
 document.Testform.url.defaultValue = "http://www.xy.com/";
 document.Testform.url.value = document.Testform.url.defaultValue;
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. Das Eingabefeld wird mit http://www.xy.de/ vorbelegt. Beim Klick auf den Button wird der Wert aus dem Eingabefeld an window. location.href zugewiesen. Dadurch wird die entsprechende URL-Adresse aufgerufen.
Bevor der Anwender jedoch überhaupt das Feld editieren kann, wird gleich beim Einlesen der Datei unterhalb des Formulars ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob in der Ausweisung des Browsers ( navigator.userAgent) der Bestandteil en vorkommt ( indexOf()). Wenn ja, ist es ein englischsprachiger Browser. In diesem Fall wird der defaultValue des Eingabefeldes auf http://www.xy.com/ geändert. Der geänderte Wert wird jedoch erst sichtbar, wenn er der Eigenschaft value zugewiesen wird. Dies geschieht in der zweiten Anweisung. Das Eingabefeld des Formulars ist dann abhängig von der Sprache des Browsers mit http://www.xy.de/ oder http://www.xy.com/ vorbelegt.

form

Speichert das Formular, innerhalb dessen sich das Element befindet. Hinter der Eigenschaft form können Sie nochmals alle Eigenschaften und Methoden des forms-Objekts notieren.

Anwendbar auf: Klick-Buttons Checkboxen Datei-Buttons Versteckte Elemente Passwort-Felder Radio-Buttons Abbrechen-Buttons Absenden-Buttons einzeilige Eingabefelder mehrzeilige Eingabefelder

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
<input type=button name="derButton" value="Test"
onClick="alert(document.Testform.derButton.form.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Formulars ausgegeben.

name

Speichert den Namen des Formularelements, wie er in HTML bei der Definition des Elements mit dem Attribut name= zugewiesen wurde.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
<input type=button name="derButton" value="Test"
onClick="alert(document.Testform.derButton.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Buttons ausgegeben.

type

Speichert den Elementtyp eines Formularelements.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
<input type=radio name="Auto" value="Porsche"> Porsche<br>
<input type=radio name="Auto" value="Mercedes"> Mercedes<br>
Name: <input size=30 name="Name"><br>
<input type=submit name="Absendebutton" value="Absenden">
</form>
<script language="JavaScript">
for(i=0;i<document.Testform.length;++i)
 {
  document.write("<br>Elementname: " + document.forms[0].elements[i].name);
  document.write(", Elementtyp: " + document.forms[0].elements[i].type);
 }
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit verschiedenen Elementen. Zu Testzwecken ist unterhalb des Formulars ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird für alle Elemente des Formulars mit document.write() der Elementname und der Elementtyp in die Datei geschrieben.

value

Speichert den Wert, der in einem Formularelement eingegeben wurde bzw. diesem zugewiesen ist.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
Name: <input size=30 name="Name">
<input type=submit name="Absendebutton" value="Absenden">
<input type=hidden name="Browser" value="">
</form>
<script language="JavaScript">
 document.Testform.Browser.value = navigator.userAgent;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, unter anderem mit einem versteckten Feld (<input type=hidden>). Unterhalb des Formulars ist ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird dem Wert des versteckten Formularfeldes (document.Testform.Browser.value) der Browsertyp des Anwenders ( navigator.userAgent) zugewiesen. Dieser dynamisch erzeugte Formularinhalt wird mit übertragen, wenn der Anwender das Formular abschickt.

blur()

Entfernt den Cursor bzw. den Focus von dem betreffenden Element. Erwartet keine Parameter.

Anwendbar auf: Klick-Buttons Checkboxen Datei-Buttons Passwort-Felder Radio-Buttons Abbrechen-Buttons Absenden-Buttons einzeilige Eingabefelder mehrzeilige Eingabefelder

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
<input name="Feld" size=30 onFocus="this.form.Feld.blur()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Feld. Wenn der Anwender den Cursor in das Feld setzen will, wird der Cursor mit blur() sofort wieder aus dem Feld entfernt. Eine solche Maßnahme kann beispielsweise sinnvoll sein, wenn Sie ein Feld ausschließlich als Ausgabefeld nutzen wollen, in dem der Anwender nichts editieren können soll.

click()

Erzeugt einen automatischen Klick auf den betreffenden Button. Erwartet keine Parameter.

Anwendbar auf: Klick-Buttons Checkboxen Datei-Buttons Radio-Buttons Abbrechen-Buttons Absenden-Buttons

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
In welchem Jahr starb Goethe?<br>
<input size=6 name="Todesjahr">
<input type=button name="derButton" value="Weiter" onClick="Check()">
</form>
<script language="JavaScript">
function Check()
{
 if(document.Testform.Todesjahr.value != "1832")
  window.location.href = "nichts.htm";
 else
  window.location.href = "erfolg.htm";   
}
window.setTimeout("document.Testform.derButton.click()",10000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender nicht innerhalb von 10 Sekunden auf den Button Weiter klickt, geschieht dies von alleine. Dafür sorgt die letzte Anweisung in dem Script, das unterhalb des Formulars notiert ist. Unterhalb des Formulars ist ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Mit document.Testform.derButton.click() wird dort das Klicken das Buttons ohne Anwendereinwirkung bewerkstelligt. Der Aufruf der Methode ist in window.setTimeout() mit einer Verzögerungszeit von 10000 Millisekunden, also 10 Sekunden, eingebettet.
Beim Klick auf den Button, egal ob durch den Anwender oder automatisch, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird eine andere Seite aufgerufen ( location.href).

focus()

Setzt den Cursor bzw. den Focus auf das betreffende Element. Erwartet keine Parameter.

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Check()
{
 if(document.Testform.Todesjahr.value != "1832")
 {
  alert("Sie wissen es einfach nicht!");
  document.Testform.Todesjahr.focus();
 }
 else
 {
  alert("Bravo!");
  window.location.href = "datei2.htm";
 }  
}
</script>
</head><body>
<form name="Testform">
In welchem Jahr starb Goethe?<br>
<input size=6 name="Todesjahr">
<input type=button value="Weiter" onClick="Check()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender auf den Button Weiter klickt, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird entweder mit alert() eine bissige Meldung ausgegeben, oder es wird "Bravo" ausgegeben und eine andere Seite aufgerufen ( location.href). Wenn der Anwender auf der Seite bleibt, weil die Eingabe fehlte oder falsch war, wird mit document.Testform.Todesjahr.focus() auf das Eingabefeld für das Todesjahr positioniert.

handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nähere Informationen siehe dort).

select()

Selektiert den gesamten in dem Feld enthaltenen Text. Erwartet keine Parameter.

Anwendbar auf: Passwort-Felder einzeilige Eingabefelder mehrzeilige Eingabefelder

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
Kopieren Sie den folgenden Code in die URL-Zeile Ihres Browsers:<br>
<input type=text size=40 name="Code" value="javascript:top.close()">
</form>
<script language="JavaScript">
 document.Testform.Code.focus();
 document.Testform.Code.select();
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem einzigen Feld. Das Feld wird mit dem Wert "javascript:top.close()" vorbelegt (wohlgemerkt: das ist keine JavaScript-Anweisung, sondern nur ein Feldinhalt). Unterhalb des Formulars ist ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Dort wird zunächst mit document.Testform.Code.focus() auf das Formularfeld positioniert. Denn das Selektieren von Text ist nur möglich, wenn das Feld den Focus hat. der vorbelegte Text des Formularfeldes wird dann mit document.Testform.Code.select() selektiert.


weiter:	options
zurück:	forms

SELFHTML/Quickbar JavaScript Objekt-Referenz