JavaScript - Tutorial - Objektreferenz - Das all-Objekt
Diese all-Objektreferenz befindet sich nur noch der Vollständigkeit halber in diesem Tutorial.
Stattdessen sollte man heutzutage die Objekte nach W3C-DOM-Level-3 benutzen.
Stattdessen sollte man heutzutage die Objekte nach W3C-DOM-Level-3 benutzen.
window
documentallstyleall ist ein Array-Objekt, welches Information über alle Seitenelemente enthält.
Dieses Objekt wurde von Microsoft mit dem Internet Explorer 4 eingeführt. Da es recht praktisch in der Anwendung ist, unterstützen es auch Konqueror und Opera.
Leider hat Netscape sich dem nicht angeschlossen, der Navigator bietet dafür andere Notationsformen.
Das all-Objekt bietet im Internet Explorer die Möglichkeit, praktisch alle Seitenelemente zu manipulieren, von Text- und Hintergrundfarbe über den Textinhalt bis hin zur Positionierung auf dem Bildschirm. Aus praktischen Gründen folgen Konqueror und Opera diesen Möglichkeiten nicht allzu konsequent, deshalb will ich mich an dieser Stelle auch nicht damit beschäftigen. Höchste Priorität genießt für mich der Anspruch, möglichst auf allen Browsern das gleiche Ergebnis zu erzielen. Deshalb behandle ich propriertäre Features des MS Internet Explorer nur am Rande.
Im Netscape Navigator befinden sich einige Objekte anstatt an der Stelle document.all.object in der Hierarchie an der Stelle document.object oder sie fehlen.
| Attribute des Objekts all | ||
|---|---|---|
| Attribut | Bedeutung | |
| length | Anzahl der Seitenelemente | |
| [#] | #-tes Formular | |
| Funktionen des Objekts all | ||
|---|---|---|
| Funktion | Bedeutung | |
| tags(tagname) | gibt ein Array aller Tags zurück, die mit dem Tagnamen übereinstimmen | |
Beispielsweise liefert document.all.tags("h2") ein Array aller <h2>-Überschriften; document.all.tags("h2")[0] beinhaltet das erste derartige Objekt, document.all.tags("h2")[1] das zweite und so weiter; document.all.tags("h2").length gibt die Anzahl aller zutreffenden Objekte zurück.
Auf jeden Fall sollten Scripts, die diese Attribute verwenden, auch in Konqueror und Opera auf Funktionstüchtigkeit getestet werden.
Dies ist eine Liste, welche die automatische Objektauflistung (Anhang B) im MS Internet Explorer 5.00 lieferte.
| Attribute der einzelnen Seitenelemente | ||
|---|---|---|
| Attribut | Typ | |
| accessKey | string | |
| all | object | |
| attributes | object | |
| behaviorUrns | object | |
| canHaveChildren | boolean | |
| charset | string | |
| childNodes | object | |
| children | object | |
| className | string | |
| clientHeight | number | |
| clientLeft | number | |
| clientTop | number | |
| clientWidth | number | |
| content | string | |
| currentStyle | object | |
| dir | string | |
| document | object | |
| filters | object | |
| firstChild | object | |
| httpEquiv | string | |
| id | string | |
| innerHTML | string | |
| innerText | string | |
| isTextEdit | boolean | |
| lang | string | |
| language | string | |
| lastChild | object | |
| name | string | |
| nextSibling | object | |
| nodeName | string | |
| nodeType | number | |
| nodeValue | object | |
| offsetHeight | number | |
| offsetLeft | number | |
| offsetParent | object | |
| offsetTop | number | |
| offsetWidth | number | |
| onafterupdate | Platzhalter für Ereignis-Handler | |
| onbeforecopy | Platzhalter für Ereignis-Handler | |
| onbeforecut | Platzhalter für Ereignis-Handler | |
| onbeforeeditfocus | Platzhalter für Ereignis-Handler | |
| onbeforepaste | Platzhalter für Ereignis-Handler | |
| onbeforeupdate | Platzhalter für Ereignis-Handler | |
| onblur | Platzhalter für Ereignis-Handler | |
| oncellchange | Platzhalter für Ereignis-Handler | |
| onclick | Platzhalter für Ereignis-Handler | |
| oncontextmenu | Platzhalter für Ereignis-Handler | |
| oncopy | Platzhalter für Ereignis-Handler | |
| oncut | Platzhalter für Ereignis-Handler | |
| ondataavailable | Platzhalter für Ereignis-Handler | |
| ondatasetchanged | Platzhalter für Ereignis-Handler | |
| ondatasetcomplete | Platzhalter für Ereignis-Handler | |
| ondblclick | Platzhalter für Ereignis-Handler | |
| ondrag | Platzhalter für Ereignis-Handler | |
| ondragend | Platzhalter für Ereignis-Handler | |
| ondragenter | Platzhalter für Ereignis-Handler | |
| ondragleave | Platzhalter für Ereignis-Handler | |
| ondragover | Platzhalter für Ereignis-Handler | |
| ondragstart | Platzhalter für Ereignis-Handler | |
| ondrop | Platzhalter für Ereignis-Handler | |
| onerrorupdate | Platzhalter für Ereignis-Handler | |
| onfilterchange | Platzhalter für Ereignis-Handler | |
| onfocus | Platzhalter für Ereignis-Handler | |
| onhelp | Platzhalter für Ereignis-Handler | |
| onkeydown | Platzhalter für Ereignis-Handler | |
| onkeypress | Platzhalter für Ereignis-Handler | |
| onkeyup | Platzhalter für Ereignis-Handler | |
| onlosecapture | Platzhalter für Ereignis-Handler | |
| onmousedown | Platzhalter für Ereignis-Handler | |
| onmousemove | Platzhalter für Ereignis-Handler | |
| onmouseout | Platzhalter für Ereignis-Handler | |
| onmouseover | Platzhalter für Ereignis-Handler | |
| onmouseup | Platzhalter für Ereignis-Handler | |
| onpaste | Platzhalter für Ereignis-Handler | |
| onpropertychange | Platzhalter für Ereignis-Handler | |
| onreadystatechange | Platzhalter für Ereignis-Handler | |
| onresize | Platzhalter für Ereignis-Handler | |
| onrowenter | Platzhalter für Ereignis-Handler | |
| onrowexit | Platzhalter für Ereignis-Handler | |
| onrowsdelete | Platzhalter für Ereignis-Handler | |
| onrowsinserted | Platzhalter für Ereignis-Handler | |
| onscroll | Platzhalter für Ereignis-Handler | |
| onselectstart | Platzhalter für Ereignis-Handler | |
| outerHTML | string | |
| outerText | string | |
| parentElement | object | |
| parentNode | object | |
| parentTextEdit | object | |
| previousSibling | object | |
| readyState | string | |
| recordNumber | object | |
| runtimeStyle | object | |
| scopeName | string | |
| scrollHeight | number | |
| scrollLeft | number | |
| scrollTop | number | |
| scrollWidth | number | |
| sourceIndex | number | |
| style | object | |
| tabIndex | number | |
| tagName | string | |
| tagUrn | string | |
| title | string | |
| url | string | |
| Funktionen der einzelnen Seitenelemente | ||
|---|---|---|
| Funktion | Bedeutung | |
| click() | Objekt anklicken | |
| contains(object) | ermittelt, ob ein weiteres Objekt im zur Funktion gehörenden Objekt enthalten ist | |
| insertAdjacentHTML(position,HTMLcode) | Fügt HTML-Code in den zugehörigen Quelltextabschnitt ein
position: "BeforeBegin"=vor dem einleitenden tag "AfterBegin"=nach dem einleitenden tag "BeforeEnd"=vor dem beendenden tag "AfterEnd"=nach dem beendenden tag HTMLcode: einzufügender HTML-Quelltext | |
| insertAdjacentText(position,text) | Fügt Text in den zugehörigen Quelltextabschnitt ein
position: "BeforeBegin"=vor dem einleitenden tag "AfterBegin"=nach dem einleitenden tag "BeforeEnd"=vor dem beendenden tag "AfterEnd"=nach dem beendenden tag text: einzufügender Text | |
| scrollIntoView(top) | rollt ein Objekt in den Sichtbereich
top: true=an oberem Rand ausrichten false=an unterem Rand ausrichten | |
| Attribute manipulieren | ||
| getAttribute(name,mode) |
Gibt den Wert eines Attributes zurück name: Attributname mode: true wenn nach Groß-und Kleinschreibung unterschieden werden soll | |
| removeAttribute(name,mode) |
entfernt ein Attribut name: Attributname mode: true wenn nach Groß-und Kleinschreibung unterschieden werden soll | |
| setAttribute(name,value,mode) |
setzt den Wert eines Attributes name: Attributname value: Attributwert mode: true wenn nach Groß-und Kleinschreibung unterschieden werden soll | |
Benutzung des all-Objekts
Dies möchte ich anhand eines Beispieles erläutern.
Will man auf einer Seite ein frei positionierbares Element einbinden, so ist der Fall im Netscape Navigator klar: es werden Layers mittels <layer>-tag eingebunden. Davon muß man jedoch Abstand nehmen, wenn die Seite auch auf anderen Browsern funzen soll.
Einen einigermaßen passablen Ersatz bietet hier das <div>-tag:
<div name="mein_div" id="mein_div" style="position:absolute; top:160; left:350; width:500; height:200; visibility:show">.
Diese Notationsform erzeugt eine Fläche im Dokument, welche an der linken oberen Ecke die Position (350,160) hat und 300 Pixel breit und 200 Pixel hoch ist. Der Hintergrund dieser Fläche sollte transparent sein, will man sie mit einer opaken Farbe füllen, sollte man eine bunte Tabelle einbinden. Man kann zwar für die Gesamtfläche eine Hintergrundfarbe oder ein Hintergrundbild im style-sheet angeben, jedoch tun sich manche Browser sehr schwer damit. Die Festlegung visibility:show stellt sicher, daß dieses Objekt mit seinem Inhalt auch tatsächlich angezeigt wird.
Es gibt nun zwei praktikable Möglichkeiten des Zugriffs auf das Objekt; einmal über document.all.tags("div")[#], alternativ dazu über document.all.mein_div. Für die zweite Möglichkeit sorgt die Notierung von id="mein_div" im Tag.
Damit das ganze auch unter Netscape funktioniert, sollte man, wie gezeigt, auch name="mein_div" definieren. Dann kann man das Objekt in der Netscape-Notation als document.mein_div ansprechen.
Ich kenne keinen Browser, der sowohl die Netscape- als auch die Microsoft-Schreibweise akzeptiert, daher ist eine Unterscheidung vorzunehmen. Mit der Abfrage if (document.all) ist zu ermitteln, ob der Browser das all-Objekt kennt. Ist das der Fall, so ist das Objekt als document.all.mein_div anzusprechen, ansonsten als document.mein_div.
Um die Position auf dem Bildschirm zu verändern, manipuliere man bei Microsoft-Schreibweise die Attribute document.all.mein_div.style.top (Y-Position) und document.all.mein_div.style.left (X-Position); bei Netscape-Schreibweise document.mein_div.top (Y-Position) und document.mein_div.left (X-Position).
Ein Funktionsbeispiel findet sich im Anhang C.