Eigenschaften
Eigenschaften von DOM-Objekten
Im DOM werden alle HTML-Elemente eines HTML-Dokuments als Objekte definiert und in einer Baumstruktur angeordnet. Diese DOM-Objekte haben verschiedenste Eigenschaften zum Ermitteln von Inhalt und Typ der Objekte sowie der übergeordneten, untergeordneten und benachbarten Objekte. Zum Ermitteln von Inhalt und Typ von Elementen bzw. deren korrespondierenden Objekten gibt es folgende Standard-Eigenschaften:
- innerHTML: Inhalt eines HTML-Elements
- nodeName: Element-Typ eines HTML-Elements
- nodeType: Objekt-Typ eines DOM-Objekts
- nodeValue: Wert eines DOM-Objekts
innerHTML
Mit der Eigenschaft „innerHTML“ kann der Inhalt von HTML-Elementen ausgegeben oder geändert werden:
HTML-Datei:
Ergebnis:
Beispiel 1
Erste Überschrift
Erstes Absatzelement!
Zweite Überschrift
Zweites Absatzelement!
nodeName
Mit der Eigenschaft „nodeName“ kann der Element-Typ von HTML-Elementen ausgegeben werden:
HTML-Datei:
Ergebnis:
nodeType
Mit der Eigenschaft „nodeType“ kann der Objekt-Typ von DOM-Objekten ausgegeben werden. Das Ergebnis ist ein nummerischer Wert, wobei es u. a. folgende Objekt-Typen gibt:
- 1: HTML-Element
- 2: Attribut eines HTML-Elements
- 3: Inhalt eines HTML-Elements
- 8: HTML-Kommentar
- 9: Das HTML-Dokument selbst
- 10: Das „doctype“-Element
HTML-Datei:
Ergebnis:
Beispiel 3
Überschrift
Absatzelement
Text im "div"-Element!
nodeValue
Mit der Eigenschaft „nodeValue“ kann der Wert von DOM-Objekten ausgegeben werden. Dabei wird bei HTML-Elementen aber nicht der Inhalt sondern „null“ ausgegeben. Bei Attributen wird der Attribut-Wert und bei Text-Objekten der Textinhalt ausgegeben:
HTML-Datei:
Ergebnis:
Beispiel 4
Überschrift
Absatzelement
Text im "div"-Element!
Abschlussübung
Als Abschlussübung kannst du das vorhergehende Beispiel so erweitern und anpassen, dass bei Klick auf eines der HTML-Elemente, die Eigenschaften „innerHTML“, „nodeName“, „nodeType“ und „nodeValue“ in einer Hinweis-Box ausgeben werden:
Beispiel 5
Überschrift
Absatzelement
Überschrift im "div"-Element
Absatzelement im "div"-Element
Text im "div"-Element!Gehe dabei wie folgt vor:
- Erweitere Beispiel 4 um ein zusätzliches Überschriften- und Absatzelement außerhalb des „div“-Elements
- Gebe den beiden neuen Elementen und dem „div“-Element das „onclick“-Ereignis, das auf eine Funktion verweist, der mit „this“ eine Referenz auf das angeklickte Element übergeben wird
- Erstelle eine Funktion, welche die vier Eigenschaften „innerHTML“, „nodeName“, „nodeType“ und „nodeValue“ des angeklickten Elements in einer Hinweis-Box ausgibt
Die Lösung kannst du dir hier herunterladen:
