JavaScript - Objektreferenz

1. Vorwort

In diesem Kapitel dreht sich alles um die Übersicht der Objekte, die uns JavaScript von Hause aus mitliefert. Ihr bekommt hier allerdings keinen kompletten Überblick, sondern nur eine gezielte Auswahl. Ich werde also zum Beispiel das frame-Objekt komplett ignorieren, (da wir ja nicht mehr mit Frames arbeiten wollen), oder diese dämliche Statuszeile links unten im Browserfenster, die eh keine Sau mehr interessiert. Ich übergehe auch alles, was ich im praktischen Einsatz bisher noch nie benutzt habe oder sich mit HTML-Attributen beschäftigt, die das Aussehen beeinflussen. Eine vollständige Übersicht findet ihr bei SelfHTML

2. Kompatibilität

Wann welcher Browser was wie versteht, könnt ihr an den kleinen Bildchen erkennen, die ich hinter allem Wichtigen platziere. Das sieht dann so aus:

Objekt, Methode, Eigenschaft

Dabei beziehe ich mich auf die aktuellen Versionen von Firefox, Opera, Safari und Chrome. Beim Internet Explorer beziehen sich die Angaben auf die Versionen 8 und aufwärts. Die entsprechenden Hinweise zu Unterschieden bei den IE-Version ist vorhanden.

3. Die DOM-Elemente

Hier gibt es eine einfache Hierarchie, die ihr dem folgenden Diagramm entnehmen könnt. Das ist allerdings nur ein grober Überblick. Die Details dazu erfahrt ihr peu à peu.

4. Ein Hinweis

Anders als SelfHTML verzichte ich aus Platzgründen bei den folgenden Beispielen auf funktionsfähigen Code, da ich nur das Prinzip zeigen will. Wer es trotzdem testen möchte, muss die entsprechenden Anpassungen vornehmen. Außerdem schult das euern Verstand.

5. Zwei Besonderheiten

Die meisten Eigenschaften sind an bestimmte Objekte gebunden. Nur zwei machen eine Ausnahme, da man sie fast immer bei unterschiedlichsten Objekten nutzen kann.

length

Gibt eine Länge wieder. Dabei existieren einfach gesagt drei Möglichkeiten:

Strings

In diesem Fall wird die Anzahl der Zeichen zurückgegeben.

var zeichenkette = 'Blubb Blubber';
// gibt 13 zurück
alert (zeichenkette.length);

Objekte

Ermittelt die Anzahl von Elementen innerhalb eines Objektes.

<form name="blabla" action="irgendwas">
  <input type="text" name="blubb">
  <input type="text" name="bluber">
  <textarea name="suelz">
    kräh bla schwall
  </textarea>
</form>
...
// gibt 3 zurück
alert (document.blabla.elements.length);

Selbst definierte Arrays

var dumdidum = new Array ('a','b','c','d');
// gibt 4 zurück
alert (dumdidum.length);

style

Hier kann man CSS-Anweisungen für HTML-Elemente auslesen und dynamisch zur Laufzeit ändern. Worauf ihr dabei achten müsst, habe ich euch ja schon hier gesagt.

document.body.style.color = '#f00';

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt