document object model (dom) level 2 html specification
TRANSCRIPT
![Page 1: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/1.jpg)
Document Object Model (DOM)Level 2 HTML Specification
![Page 2: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/2.jpg)
Gliederung
1. Einführung Spezifikation
2. DOM Module Levels, Core, Überblick
3. DOM Intern Funktionsweise, Parser
4. DOM Level 2 HTML Eigenschaften, Vorteile, Beispiel
5. HTML-Elemente HTMLDocument, Java-Programm
![Page 3: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/3.jpg)
1. Einführung
![Page 4: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/4.jpg)
DOM – Die Spezifikation (1) „Document Object Model“ =>
logisches Modell zur Darstellung von Daten
sprach- und plattformneutral
vom W3C definierte Sammlung von Schnittstellen zum Zugriff auf das Modell
![Page 5: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/5.jpg)
DOM – Die Spezifikation (2)
Anwendungen, die auf XML- oder HTML Dokumente zugreifen können
Navigieren, Lesen, Schreiben, Hinzufügen und Entfernen von Dokumentinhalten
![Page 6: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/6.jpg)
DOM – Die Spezifikation (3) alle Objekte des Dokuments in
hierarchischer Baumstruktur eingegliedert
werden im DOM Knoten genannt
garantiert strukturellen Isomorphismus
jedes XML-Dokument besitzt eindeutige Struktur
![Page 7: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/7.jpg)
2. Die Module
![Page 8: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/8.jpg)
DOM – Die Module (1)
DOM Level 1 vom W3C Konsortium am 1. Oktober 1998 fertiggestellt
Motivation: mehrere Firmen entwickelten unterschiedliche Methoden, wie man auf eine HTML Datei zugreifen kann -> Gefahr der Sprachverwirrung
Norm, wie die unterschiedlichen Inhalte solcher Dokumente angesprochen werden sollen
![Page 9: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/9.jpg)
Das Core - Modul DOM Level 1 Core
wichtigstes Modul (Basis für den Umgang mit XML-Dokumenten)
Struktur eines XML - Dokuments in Baumstruktur
![Page 10: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/10.jpg)
DOM – Die Module (2)
DOM Level 2 am 13. November 2000 herausgegeben
berücksichtigt Konzept der Namensräume
Manipulieren von Style Informationen
DOM-Implementierungen müssen Core oder HTML erweitern und beliebig viele weitere Module
![Page 11: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/11.jpg)
DOM – Die Module (3)
![Page 12: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/12.jpg)
DOM – Die Module (4)
DOM Level 3 – Dezember 2000
Laden und Speichern Typmodelle wie DTD Schema mit Datenvalidierung Document Views und Formatierung Ereignisgruppen
![Page 13: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/13.jpg)
3. DOM Intern
![Page 14: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/14.jpg)
Wie funktioniert DOM?
![Page 15: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/15.jpg)
DOM Parser (1)
DOM Parser: nach syntaktischer Überprüfung der HTML Datei wird diese vollständig in Form eines Baumes (Dokumentenbaumes) im Speicher abgebildet.
Die einzelnen Bestandteile der HTML Datei bilden Knoten des Baumes.
![Page 16: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/16.jpg)
DOM Parser (2)
Dadurch kann der Programmierer ständig auf alle Teile der Datei zugreifen und sie an beliebiger Stelle verändern
![Page 17: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/17.jpg)
DOM Parser (3)
DOM Parser, z.B. Xercesimport
org.apache.xerces.parsers.DOMParser
Objekt der Parserklasse instantiieren
DOMParser parser = new DOMParser();
Dokument-Objekt holengetDocument();
![Page 18: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/18.jpg)
DOM und Java (1) Document Object Model API Zugriff auf Baum mit DOM API
DOM API importierenimport org.w3c.dom.*
Methoden aus dem Interface Node:
int getNodeType();String getNodeValue();NodeList getChildNodes();boolean has ChildNodes();
![Page 19: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/19.jpg)
DOM und Java (2)
Verfügbare APIs
Xerces Apache Project www.apache.org
JDOM www.jdom.org
JAXP java.sun.com
![Page 20: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/20.jpg)
4. DOM Level 2 HTML
![Page 21: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/21.jpg)
DOM Level 2 HTML (1)
Für HTML 4.0 und XHTML 1.0 Dokumente
Stützt sich auf DOM Level 2 Core (für XML 2.0) ab, nicht kompatibel mit DOM Level 1
DOM HTML Level 1 ursprünglich nur für HTML 4.01 entwickelt, bevor XHTML 1.0 spezialisiert wurde
![Page 22: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/22.jpg)
DOM Level 2 HTML (2)
Wesentlicher Unterschied: XHTML beachtet Groß- und Kleinschreibung, HTML nicht.
stellt für HTML spezialisierte Schnittstellen zur Verfügung
eigene Schnittstelle für viele HTML-Tags
![Page 23: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/23.jpg)
Vorteile (1)
Einheitliche Schnittstelle in verschiedenen Entwicklungsumgebungen
Logisches Objekt, das HTML-Dokumente in eindeutiger Form strukturiert
vom W3C standardisiert und unterstützt durch Firmen wie Sun, IBM, Microsoft
![Page 24: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/24.jpg)
Vorteile (2)
Spezialisieren und Hinzufügen von Funktionalität, die sich auf HTML – Elemente bezieht
Unterstützung von benutzerfreundlichen Mechanismen für häufige Operationen auf HTML Elementen
![Page 25: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/25.jpg)
Speicher und Performance
Keine Probleme bei kleineren Dokumenten
Bei umfangreichen Dateien schwerfällig und langsam
=>besser viele kleine Dokumente als ein großes
![Page 26: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/26.jpg)
Beispiel
http://www.brainjar.com/dhtml/domviewer/demo.html
![Page 27: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/27.jpg)
5. HTML Elemente
![Page 28: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/28.jpg)
HTMLDocument Spezialisierung von Document
aus Core repräsentiert gesamtes HTML-
Dokument
<html>…</html>
title, referrer, domain, URL, body, images, applets, links, forms, anchors, cookie
![Page 29: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/29.jpg)
interface HTMLDocument : Document { attribute DOMString title;
readonly attribute DOMString referrer; readonly attribute DOMString domain; readonly attribute DOMString URL; attribute HTMLElement body; readonly attribute HTMLCollection images; readonly attribute HTMLCollection applets; readonly attribute HTMLCollection links; readonly attribute HTMLCollection forms; readonly attribute HTMLCollection anchors;
attribute DOMString cookie; // raises(DOMException) on setting
void open(); void close(); void write(in DOMString text); void writeln(in DOMString text); NodeList getElementsByName(in DOMString elementName);
};
![Page 30: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/30.jpg)
HTMLElement
Spezialisierung von Element aus Core
Elemente, die nur die Kernattribute von HTML erweitern (z.B. Sub, Sup, Span, Big, Small, Em, Strong, Abbr, Dt, Noframes, Center)
id, title, lang, dir, className
![Page 31: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/31.jpg)
interface HTMLElement : Element { attribute DOMString id; attribute DOMString title; attribute DOMString lang; attribute DOMString dir; attribute DOMString className;
};
![Page 32: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/32.jpg)
HTMLCollection
entspricht NodeList von Core, Menge von Node-Objekten
Zugriff über Index oder Namen
length, item, namedItem
![Page 33: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/33.jpg)
interface HTMLCollection { readonly attribute unsigned long length; Node item(in unsigned long index);
Node namedItem (in DOMString name);
};
![Page 34: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/34.jpg)
HTMLBodyElement
Spezialisierung von HTMLElement
repräsentiert den Körper der HTML-Datei
<body>…</body>
aLink, background, bgcolor, link, text, vLink
![Page 35: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/35.jpg)
interface HTMLBodyElement : HTMLElement { attribute DOMString aLink; attribute DOMString background; attribute DOMString bgColor; attribute DOMString link; attribute DOMString text; attribute DOMString vLink;
};
![Page 36: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/36.jpg)
HTMLFormElement
Spezialisierung von HTMLElement
repräsentiert ein HTML-Formular
<form> … </form>
elements, length, name, acceptCharset, action, enctype, method, target, submit, reset
![Page 37: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/37.jpg)
interface HTMLFormElement : HTMLElement { readonly attribute HTMLCollection elements; readonly attribute long length;
attribute DOMString name; attribute DOMString acceptCharset; attribute DOMString action; attribute DOMString enctype; attribute DOMString method; attribute DOMString target; void submit(); void reset();
};
![Page 38: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/38.jpg)
Verwendung: Java-Programm „ChangeBGColor“ – setzt bei
beliebigen HTML-Dokument bgcolor-Attribut im Body auf Wert und speichert dies + Textausgabe
![Page 39: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/39.jpg)
import java.io.*; import org.w3c.dom.*; import org.xml.sax.*; import org.w3c.dom.html.*;import org.apache.xml.serialize.*;import
org.apache.html.dom.HTMLDocumentImpl;import org.apache.xerces.parsers.DOMParser;
public class ChangeBGColor { public ChangeBGColor() { }
public static void main(String[] args) {
![Page 40: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/40.jpg)
try { String filename = args[0]; DOMParser parser = new DOMParser(); parser.parse(new InputSource(filename)); HTMLDocumentImpl doc = (HTMLDocumentImpl)parser.getDocument(); HTMLBodyElement body = (HTMLBodyElement) doc.getBody(); String color = body.getBgColor(); System.out.println ("Aktuelle Hintergrundfarbe ist "+color+"."); color = args[1]; body.setBgColor(color); System.out.println ("Farbe geändert zu "+color+".");
![Page 41: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/41.jpg)
// Document drucken OutputFormat format = new OutputFormat (doc); format.setLineSeparator (LineSeparator.Windows); FileOutputStream out = new FileOutputStream (filename); HTMLSerializer html = new HTMLSerializer (out, format); html.serialize (doc);
} catch(Exception e) { System.out.println ("Fehler beim Parsen!"); e.printStackTrace (System.out);
} } }
![Page 42: Document Object Model (DOM) Level 2 HTML Specification](https://reader035.vdocument.in/reader035/viewer/2022062312/55204d6649795902118bb5c0/html5/thumbnails/42.jpg)
Vielen Dank!