Im DOM sind alle HTML-Elemente einer Webseite als Objekte in einer Baumstruktur definiert. Auf diese Objekte kann mit Hilfe von Skriptsprachen wie JavaScript zugegriffen werden. Dazu gibt es in JavaScript folgende Methoden:
Mit der Methode „getElementById()“ kann über das „id“-Attribut des HTML-Elements auf ein HTML-Element zugegriffen werden. Die Methode gibt dabei nur genau ein Element zurück. Eine ID sollte auf einer Webseite immer eindeutig sein, weshalb auch immer nur ein Element mit dieser Methode angesprochen werden kann. Sollte eine ID trotzdem mehrfach vergeben werden, gibt die Methode das erste gefundene Element mit dieser ID zurück:
HTML-Datei:
Ergebnis:
Text im Absatzelement!
Die Methode „getElementsByTagName()“ gibt eine Liste der HTML-Elemente zurück, die dem in der Klammern angegebenen Element-Typ entsprechen. Die zurückgegebene Liste entspricht einem Feld, auf dessen Elemente über einen Index zugegriffen werden kann. Wird in der Klammer ein Stern („*“) angegeben, so werden alle Elemente des DOM zurückgegeben:
HTML-Datei:
HTML-Datei:
Ergebnis:
Die Methode „getElementsByClassName()“ gibt eine Liste der HTML-Elemente zurück, deren „class“-Attribut den in der Klammer angegebenen Wert hat. Die zurückgegebene Liste entspricht einem Feld, auf dessen Elemente über einen Index zugegriffen werden kann. Soll nach mehreren Klassen gesucht werden, so werden die einzelnen Klassen in der Klammer durch Komma getrennt angegeben. Sollen mehrere Klassen gleichzeitig zutreffen, werden die Klassen durch Leerzeichen getrennt angegeben:
HTML-Datei:
Ergebnis:
Absatz mit class-Attribut
Absatz OHNE class-Attribut
Die Methode „getElementsByName()“ gibt eine Liste der HTML-Elemente zurück, deren „name“-Attribut den in der Klammer angegebenen Wert hat. Die zurückgegebene Liste entspricht einem Feld, auf dessen Elemente über einen Index zugegriffen werden kann:
HTML-Datei:
Ergebnis:
Die Methode „querySelectorAll()“ gibt eine Liste der HTML-Elemente zurück, für die eine bestimmter CSS-Selektor gilt. Das kann ein Klasse, eine ID oder ein HTML-Element-Typ sein, aber auch Kombinationen daraus. Die zurückgegebene Liste entspricht einem Feld, auf dessen Elemente über einen Index zugegriffen werden kann:
HTML-Datei:
Ergebnis:
Absatz mit class-Attribut
Absatz OHNE class-Attribut
Mit speziellen DOM-Objekten, den Wurzel-Objekten, kann auf den gesamten Inhalt einer Webseite zugegriffen werden:
HTML-Datei:
Ergebnis:
Als Abschlussübung kannst du folgendes Beispiel erstellen, bei dem die Hintergrundfarbe auf grün wechselt, wenn alle Felder ausgefüllt wurden. Mit „Felder zurücksetzen“ werden alle Felder zurückgesetzt und die Hintergrundfarbe wieder auf rot gesetzt:
Vorname: | |
Nachname: | |
Alter: | |
Geschlecht: |
Weiblich Männlich |
Gehe dabei wie folgt vor:
Die Lösung kannst du dir hier herunterladen: