JavaScript - Tutorial - Objektreferenz - Das elements-Objekt
In modernen Browsern ist dieses Objekt vom Typ
NodeList (W3C-DOM-Level-3).
window
documentformselementsoptionselements ist ein Array-Objekt, welches Information über alle mit den <input>- <textarea>- und <select>-tags erzeugten Formularelemente enthält.
| Attribute des Objekts elements | ||
|---|---|---|
| Attribut | Bedeutung | |
| length | Anzahl der Formularelemente | |
| [#] | #-tes Formularelement | |
| Attribute eines Formularelements | ||
|---|---|---|
| Attribut | Bedeutung | |
| checked | Checkung von Checkboxen und Radiobuttons (<input>) | |
| defaultChecked | voreingestellte Checkung (<input>) | |
| defaultValue | voreingestellter Textinhalt (<input> <textarea>) | |
| name | Name | |
| selectedIndex | Index der Auswahl (<select>) | |
| type | Typ (<input>) | |
| value | Textinhalt | |
| Unter-Objekte eines Formularelements | ||
|---|---|---|
| Objekt | Bedeutung | |
| form | Formular, zu dem das Element gehört | |
| options | Array der Optionen eines Auswahlfeldes (<select>) | |
| [#] | #-te Option (alternativ zu options[#]) | |
Das heißt, daß man anstatt forms[#].elements[#].options[#] auch forms[#].elements[#][#] oder forms[#][#][#] schreiben kann.
Von derartiger Verkürzung rate ich allerdings ab, da es vermutlich nicht von jedem Browser verstanden wird.
| Funktionen eines Formularelements | ||
|---|---|---|
| Funktion | Bedeutung | |
| blur() | Element verlassen | |
| click() | Mausklick simulieren | |
| focus() | Element aktivieren | |
| handleEvent() | Ereignis verarbeiten | |
| select() | Text selektieren | |
Einbindung von Formularelementen in JavaScript
Die einzelnen Formulare lassen sich nicht nur über document.forms[#].elements[#] ansprechen, sondern auch über den im jeweiligen tag angegebenen Namen.
Eine mit <input name="mein_textfeld"> eingebundene Eingabezeile kann auch als document.forms[#].mein_textfeld angesprochen werden.
Alternativ zu document.forms[#].elements[#] kann auch document.forms[#][#] geschrieben werden.
HTML-Quelltext des Formulars:
|
In diesem Beispiel hat das Formular den Namen demo. Der Ausdruck document.demo ist also mit document.forms[0] gleichzusetzen.
Die Textfelder haben die Namen punktwert und checkwert, anstatt document.demo.elements[4] kann auch document.demo.punktwert geschrieben werden, anstatt document.demo.elements[9] auch document.demo.checkwert.
Die vier Radiobuttons werden durch document.demo.elements[0] bis document.demo.elements[3] dargestellt, die vier Checkboxen durch document.demo.elements[5] bis document.demo.elements[8]. Sie sind nicht über ihre Namen ansprechbar, da sich jeweils vier Radiobuttons und Checkboxen den gleichen Namen teilen. Das ist besonders für die Radiobuttons nötig, damit der Browser weiß, welche Radiobuttons eine funktionale Einheit bilden.
JavaScript-Quelltext im head-Bereich
<script type="text/javascript">
<!--
function MachPunkte()
{
var i,Text;
Text=""; /* Text leeren */
for (i=0;i<4;i++) /* die vier Radiobuttons durchsehen */
{
Text+=document.demo.elements[i].value; /* Inhalt zum Text dazu */
if (document.demo.elements[i].checked) /* wenn gecheckt */
Text+=" <#>\n";
else /* ansonsten */
Text+=" < >\n";
}
document.demo.punktwert.value=Text; /* oberes Textfeld beschreiben */
Text=""; /* Text leeren */
for (i=5;i<9;i++) /* die vier Checkboxen durchsehen */
{
Text+=document.demo.elements[i].value; /* Inhalt zum Text dazu */
if (document.demo.elements[i].checked) /* wenn gecheckt */
Text+=" <#>\n";
else /* ansonsten */
Text+=" < >\n";
}
document.demo.checkwert.value=Text; /* unteres Textfeld beschreiben */
}
//-->
</script>
|