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
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
Wird immer wieder nachgefragt, gibt es aber leider nicht! Vielleicht erbarmt sich das W3C ja und baut es in den nächsten Standard ein. Allerdings existieren mittlerweile einige Workarounds zu diesem Thema.
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.