19.05.2009
© J. Schneeberger
DOM Document Object Model
Das „Document Object Model“ (DOM) W3C Spezifikation Benutzt die Baumstruktur des (XML/HTML) Dokuments Programmierschnittstelle (API) für HTML- und XML-Dokumente in JavaScript Core DOM – Objekt-Modell für HTML und XML Dokumente XML DOM – Objekt-Modell für XML Dokumente
© J Schneeberger
HTML DOM – Objekt-Modell für HTML Dokumente
1
19.05.2009
DOM Knoten Das gesamte Dokument ist ein Knoten Jedes XML Element ist ein Knoten Der Text in einem XML Element ist ein Textknoten Jedes Attribut ist ein Attributknoten
© J Schneeberger
Kommentare sind Komentarknoten
3
© J Schneeberger
DOM
2
19.05.2009
Der DOM Baum Ein DOM Baum besteht aus den Knoten des XML Dokuments Konzepte wie in XPath: Wurzelknoten / root Jeder Knoten (außer der Wurzel) hat genau einen Elternknoten Ein Knoten kann eine beliebige Anzahl von Kinderknoten haben Ein Blattknoten ist ein Knoten ohne Kinder
Geschwister sind geordnet, d.h. der erste und der letzte Geschwisterknoten können identifiziert werden. 5
© J Schneeberger
Geschwister (siblings) sind Knoten mit dem selben Elternknoten
In JavaScript / im Browser Laden einer XML Datei var xmlDoc; xmlDoc=new window.XMLHttpRequest(); xmlDoc.open("GET","books.xml",false); xmlDoc.send("");
6
try { //Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); return xmlDoc; } catch(e) { parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); return xmlDoc; }
© J Schneeberger
Laden einer XML Zeichenkette
3
19.05.2009
DOM Eigenschaften und Methoden Beispiele für Eigenschaften (wenn x ein Knoten ist): x.nodeName – der Name von x x.nodeValue – der Wert von x x.parentNode – der Elternknoten von x x.childNodes – die Kindknoten von x x.attributes – die Attributknoten von x
Beispiele für Methoden (wenn x ein Knoten ist): x.getElementsByTagName(name) – liefert alle Elemente mit Namen name x.appendChild(node) – fügt einen Kindknoten unter x ein
© J Schneeberger
x.removeChild(node) – entfernt einen Kindknoten von x
7
Weiteres JavaScript Beispiel txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
xmlDoc das DOM Objekt, das der Parser erzeugt hat getElementsByTagName("title")[0] das erste Element im Array aller Elemente childNodes[0] das erste Element im Array der Kinder
8
© J Schneeberger
nodeValue der Wert des Knotens (der Text)
4
19.05.2009
Zugriff auf DOM Knoten Mit der Methode getElementsByTagName() Durch Traversierung des Baumes
© J Schneeberger
Durch Navigation im Baum durch Verwendung der KnotenRelationen
9
DOM Knoten Namen des Knoten: nodeName Kann nicht verändert werden Entspricht der Bezeichnung des Tags Bei Attributen dem Attributnamen Bei Textknoten dem enthaltenen Text
Wert eines Knoten: nodeValue Elementknoten haben keinen Wert Textknoten haben als Wert den Text Attributknoten haben als Wert den Attributwert
Element, Attribute, Text, Comment, Document 10
© J Schneeberger
Typ eines Knoten: nodeType
5
19.05.2009
G. Görz, FAU, Informatik 8
© J Schneeberger
G. Görz, FAU, Informatik 8
© J Schneeberger
Firefox DOM Inspector
6
19.05.2009
Links
© J Schneeberger
http://www.w3schools.com/dom/default.asp
13
JavaScript HTML DOM
© J. Schneeberger
JavaScript = ECMA-Script
7
19.05.2009
© J Schneeberger
JavaScript DOM (Netscape)
15
Einbettung in HTML document.write("Hello World!") An beliebiger Stelle im Dokument
16
© J Schneeberger
Vorsicht mit alten Browsern
8
19.05.2009
Variablen var strname = "Hege"
oder
strname = "Hege" Groß- / Kleinschreibung beachten Lebensdauer: bis zum Ende des Browsers
© J Schneeberger
Operatoren wie in Java!
17
Funktionen Aufruf alert("This is a message") Definition function myfunction(param1, param2, …) { some statements }
18
© J Schneeberger
Rekursiv und in Ausdrücken verwendbar
9
19.05.2009
Konditionale if (condition) { code to be executed if condition is true } variablename=(condition)?value1:value2
switch (expression) { case label1: code to be executed if expression = label1 break case label2: code to be executed if expression = label2 break default: code to be executed if expression is different from both label1 and label2 } 19
© J Schneeberger
if (condition) { code to be executed if condition is true } else { code to be executed if condition is false }
Schleifen while (condition) { code to be executed } do {
code to be executed } while (condition)
20
© J Schneeberger
for (initialization; condition; increment) { code to be executed }
10
19.05.2009
Außerdem ... 2. Ordnung Typen: String, Date, Function, Array Arrays [ elem1, elem2, ...] ... auch verschachtelt Verwendung von " und '
© J Schneeberger
Erzeugung von Objekten per “new”
21
Eventhandler Viele HTML Elemente können mit JavaScript Eventhandlern ausgestattet werden. Z.B.: onAbort, onClick, onFocus, onLoad, onMouseover, onSelect, onSubmit, etc. Es können JavaScript Ausdrücke angegeben werden, die beim jeweiligen Ereignis ausgeführt werden.
22
© J Schneeberger
Die Reihenfolge der Ausführung der Eventhändler muss genau bedacht werden. Beispiel: Ein Knopf hat gleichzeitig die Eventhändler onClick, onFocus, onMouseover und onSubmit definiert. Was passiert in so einem Fall?
11
