JavaScript: DOM-Baum lesen und verändern
Mit JavaScript können sämtliche HTML-Elemente eines Dokumentes ausgelesen und bearbeitet werden. Diese Elemente sind im Dokument hierarchisch nach dem Document Object Model (DOM) angeordnet. Die oberste Ebene dieser Hierarchie bildet immer das <html>-Element. Es enthält als Eltern-Element (parent) seinerseits Kind-Elemente (children: <head> und <body>). Elemente werden durch ihren Elementnamen definiert und können bestimmte Attribute enthalten. Auch die Attribute der Elemente können mit JavaScript gelesen und bearbeitet werden. Elemente, die ein Start- und End-Tag besitzen, können weitere Kind-Elemente und reinen Text beinhalten. Alle Kind-Elemente des gleichen Eltern-Elements werden Geschwister-Elemente (siblings) genannt.
Als Beispiel dient folgendes einfaches HTML-Dokument, das sich lose an der Idee von Unobtrusive JavaScript orientiert, bei dem HTML-Markup, CSS-Stile und JavaScript klar von einander getrennt sind. Es enthält noch keine JavaScript-Anweisungen. Diese werden im Laufe der folgenden Erläuterungen hinzugefügt, um die jeweiligen Funktionsweisen zu demonstrieren.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
DOM-Baum lesen
► JavaScript-Referenz: getElementsByTagName() getElementsByClassName() getElementsByName()
► JavaScript-Referenz: getElementById() querySelectorAll()
Alle Elemente des Dokuments sind im JavaScript-Objekt document enthalten und können mit verschiedenen Methoden dieses Objekts abgefragt werden, je nachdem, anhand welcher Eigenschaft ein Element identifiziert werden soll.
getElementsByTagName() gibt ein Array mit allen Elementen zurück, die den angegebenen Elementnamen haben.
getElementsByClassName() gibt alle Elemente zurück, die der angegebenen CSS-Klasse angehören.
getElementsByName() gibt alle Elemente zurück, die das angegebene name-Attribut besitzen.
getElementById() gibt das Element zurück, das das angegebene id-Attribut besitzt. Sollten im Dokument fälschlicherweise mehrere Elemente dieselbe ID besitzen, so wird das erste Element mit der gesuchten ID zurückgegeben.
querySelectorAll() findet alle Elemente, die einem bestimmten CSS-Selektor entsprechen. Also Elemente, IDs, Klassen oder Attribute.
Diese Methoden können auch verkettet werden, beispielsweise findet document.getElementById("foo").getElementsByClassName("bar") alle Elemente, die Nachkommen des Elements mit der ID foo sind und der CSS-Klasse bar angehören.
Mit der Eigenschaft length kann die Anzahl der in dem Array enthaltenen Elemente abgefragt werden.
Mit der Eigenschaft innerHTML kann bei Elementen mit Start- und End-Tag der gesamte Inhalt zwischen den Tags ermittelt werden.
Die Eigenschaft outerHTML gibt zusätzlich die umschließenden Tags mit allen Attributen zurück.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
► JavaScript-Referenz: hasAttribute() getAttribute()
Mit der Methode hasAttribute() lässt sich abfragen, ob ein Element ein bestimmtes Attribut besitzt.
Mit der Methode getAttribute() lässt sich der Inhalt eines bestimmten Attributs abfragen.
1 2 |
|
► JavaScript-Referenz: getComputedStyle() getPropertyValue()
Die Eigenschaft style ist direkt verfügbar. Über sie können alle im style-Attribut des Elements definierten CSS-Stil-Eigenschaften abgefragt werden. Da nach der JavaScript-Syntax keine Bindestriche erlaubt sind, werden zusammengesetzte Namen von CSS-Eigenschaften stattdessen in lowerCamelCase geschrieben (hier fontFamily statt font-family).
Möchte man CSS-Eigenschaften abfragen, die nicht im style-Attribut des Elements festgelegt wurden, kann man sich der Methode getPropertyValue() bedienen. Diese wird auf die Methode getComputedStyle() des window-Objekts angewendet.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Bei der Verarbeitung von Formular-Elementen sind eine Reihe von Besonderheiten zu beachten (s. auch Formular-Events).
<input type="text"> und <input type="range">:
Die Methode getAttribute("value") gibt den ursprünglich im Quelltext vorgesehenen Wert des Attributs zurück, auch wenn der Wert über die Eigenschaft value verändert wurde.
Der vom Benutzer geänderte Wert kann mit value abgefragt werden.
<input type="checkbox"> und <input type="radio">:
Die Eigenschaft value gibt den ursprünglich im Quelltext vorgesehenen Status des Elements zurück, auch wenn der Wert über die Eigenschaft checked verändert wurde.
Der vom Benutzer geänderte Wert kann mit checked abgefragt werden.
<select>:
Die Eigenschaften selectedIndex und value verhalten sich erwartungsgemäß. Auch wenn der Status des Elements mit selected geändert wurde, gibt value die geänderte Auswahl zurück.
Die vom Benutzer gewählte Option kann mit selectedIndex und value abgefragt werden.
<textarea>:
Die Eigenschaft innerHTML gibt den ursprünglich im Quelltext vorgesehenen Inhalt des Elements zurück, auch wenn dieser über die Eigenschaft value verändert wurde.
Wurde der Inhalt des Elements bereits mit value geändert, kann er nicht wieder erneut mit innerHTML geändert werden.
Der vom Benutzer geänderte Inhalt kann mit value abgefragt werden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
DOM-Baum bearbeiten
► JavaScript-Referenz: createElement() replaceChild() appendChild() insertBefore() removeChild()
Um ein neues HTML-Element im Dokument unterzubringen, wird dieses Element zunächst mit der Methode createElement() erzeugt und gegebenenfalls mit Attributen und Inhalten ausgestattet. Dann stehen verschiedene Methoden zur Verfügung, um es in den DOM-Baum einzufügen:
Mit appendChild() wird es nach dem letzten KInd-Element des Eltern-Elements eingefügt.
Mit replaceChild() kann ein existierendes Element durch das neue ersetzt werden.
Mit insertBefore() kann das neue Element vor ein existierendes eingefügt werden. Ist das existierende Element nicht über seine ID oder ein anderes Merkmal identifizierbar, kann es auch über die Eigenschaft children des Eltern-Elements gefunden werden, indem alle direkten Kind-Elemente enthalten sind.
MIt der Methode removeChild() kann ein existierendes Element schließlich auch wieder entfernt werden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
► JavaScript-Referenz: setAttribute()removeAttribute()
Eine andere einfache Methode, ein existierendes Element zu ersetzen, besteht darin, seine outerHTML-Eigenschaft mit dem neuen Element zu überschreiben, das einfach komplett als String notiert wird. Ist dieser String leer, wird das Element gelöscht.
Einzelne Attribute eines Elements können mit der Methode setAttribute() eingefügt oder geändert werden.
Mit removeAttribute() kann das Attribut wieder entfernt werden.
1 2 3 |
|
Elemente und Attribute aus spezifischem Namensraum
► JavaScript-Referenz: createElementNS() setAttributeNS() removeAttributeNS()
Die Methoden createElement() und setAttribute() erzeugen Elemente bzw. Attribute in durchgehender Kleinschreibung, auch wenn in den übergebenen Namen Großbuchstaben vorhanden waren. Für HTML mag das sinnvoll sein, da Kleinschreibung hier die Norm ist. In anderen Auszeichnungssprachen, wie beispielsweise SVG, werden allerdings Element- und Attributnamen in lowerCamelCase-Schreibweise verwendet, die auch Großbuchstaben enthalten.
Um solche Elemente und Attribute mit JavaScript generieren zu können, werden die Methoden createElementNS() und setAttributeNS() verwendet, bei denen explizit der betreffende Namensraum angegeben werden muss, in dem die gewünschten Bezeichner gültig sind.
1 2 |
|