JavaScript - Objektreferenz - document

1. Das Objekt

Mit diesem Objekt könnt ihr auf den Inhalt einer Internetseite zugreifen. Die Eigenschaften, über die man verfügt, sind meiner Meinung nach mittlerweile hanebüchener Unsinn, also lass ich sie weg. Die kann man auch größtenteils durch stinknormales HTML ersetzen bzw. mit CSS formatieren. Wen es trotzdem interessiert, bitteschön. Bei den Methoden wird es allerdings sehr interessant.

2. Methoden

createAttribute

Erzeugt ein HTML-Attribut, das man später über das "node"-Objekt auf HTML-Elemente anwenden kann.

var breite = document.createAttribute('width');

createElement

Erzeugt ein HTML-Element, das man später über das "node"-Objekt mit irgendwas (z.B. Text) füllen kann.

var absatz = document.createElement('p');

createTextNode

Erzeugt einen Textknoten, den man später über das "node"-Objekt in ein HTML-Element einbinden kann.

var bla = document.createTextNode('Blubb blubber');

getSelection

(Internet Explorer ab Version 9)

Ermittelt den Text, den der Anwender mit der Maus markiert (selektiert) hat.

var markiert = document.getSelection();

write, writeln

Gibt beliebigen Text in einem Document aus. writeln fügt automatisch noch einen Zeilenumbruch am Ende ein.

document.write('Kräh bla schwall');

getElementById

Kann sich noch einer an die verschiedenen Definitionsmöglichkeiten bei CSS erinnern? Da habe ich darauf hingewiesen, dass eine id nur einmal pro Seite verwendet werden darf. Und endlich erfahrt ihr auch warum. HTML-Elemente mit einer ID lassen sich wunderbar manipulieren, und besonders mit CSS. Ein paar Beispiele.

document.getElementById('blubb').style.display = 'none';
document.getElementById('blubb').style.left = 50 + 'px';
document.getElementById(variablenname).style.border = 1 + 'px';

getElementsByName

Funktioniert genau wie obiges Beispiel, greift aber auf HTML-Tags zu, die den entsprechenden Wert im name-Attribut haben. Als Ergebnis bekommt man ein Array zurückgeliefert.

// Ändert das zweite(!) Element mit dem Namen 'blubb'
document.getElementsByName('blubb')[1].style.display = 'none';

getElementsByTagName

Funktioniert genau wie die vorherigen Beispiele, bezieht sich aber auf das HTML-Tag an sich.

document.getElementByTagName('p')...

getElementsByClassName

Ist mittlerweile in allen modernen Browsern verfügbar. Im Internet Explorer ab Version 9.

3. Die Möglichkeiten

... sind fast grenzenlos. Vor allem, wenn es um die Manipulation einer HTML-Seite zur Laufzeit geht. Die Details dazu erfahrt ihr an dieser Stelle. Und wenn ihr das denn begriffen habt, so erwarten euch ein paar nette Tutorials zu diesem Thema. Allerdings solltet ihr euch vorher erst mal die entsprechenden Grundlagen aneignen.

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