Document Object Model (DOM)


Einleitung

DOM Eigenschaften

Beispiel

Die Tabelle

Shady Grove Aeolian
Over the River, Charlie Dorian

in HTML

      <TABLE border="1">
      <TBODY> 
      <TR> 
      <TD>Shady Grove</TD>
      <TD>Aeolian</TD> 
      </TR> 
      <TR>
      <TD>Over the River, Charlie</TD>        
      <TD>Dorian</TD> 
      </TR> 
      </TBODY>
      </TABLE>

sieht in DOM (bei einer Baum-Implementierung) wie folgt aus:

DOM Darstellung des Beipsiels

DOM Darstellung des Beispiels, Quelle W3C

Objekt Modell

Interface Definition Language (IDL)

Unterschiede zu Implementierungen


DOM Level 1, Core

DOM Interface Vererbung

DOM Interface Vererbung (---)
und Elementbeziehungen (...)

Notation: Abgeleitetes_Interface : Basis_Interface

Spezifiziert gemeinsame Basis für HTML und XML Teile:

Interface: Node

interface Node {
  // NodeType
  const unsigned short ELEMENT_NODE                = 1;
  const unsigned short ATTRIBUTE_NODE              = 2;
  const unsigned short TEXT_NODE                   = 3;
  const unsigned short CDATA_SECTION_NODE          = 4;
  const unsigned short ENTITY_REFERENCE_NODE       = 5;
  const unsigned short ENTITY_NODE                 = 6;
  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
  const unsigned short COMMENT_NODE                = 8;
  const unsigned short DOCUMENT_NODE               = 9;
  const unsigned short DOCUMENT_TYPE_NODE          = 10;
  const unsigned short DOCUMENT_FRAGMENT_NODE      = 11;
  const unsigned short NOTATION_NODE               = 12;

  readonly attribute  DOMString            nodeName;
           attribute  DOMString            nodeValue;
                      // raises(DOMException) on setting
                      // raises(DOMException) on retrieval
  readonly attribute  unsigned short       nodeType;
  readonly attribute  Node                 parentNode;
  readonly attribute  NodeList             childNodes;
  readonly attribute  Node                 firstChild;
  readonly attribute  Node                 lastChild;
  readonly attribute  Node                 previousSibling;
  readonly attribute  Node                 nextSibling;
  readonly attribute  NamedNodeMap         attributes;
  readonly attribute  Document             ownerDocument;
  Node                insertBefore(in Node newChild, 
                                   in Node refChild)
                                   raises(DOMException);
  Node                replaceChild(in Node newChild, 
                                   in Node oldChild)
                                   raises(DOMException);
  Node                removeChild(in Node oldChild)
                                  raises(DOMException);
  Node                appendChild(in Node newChild)
                                  raises(DOMException);
  boolean             hasChildNodes();
  Node                cloneNode(in boolean deep);
};

Interface: Document

interface Document : Node {
  readonly attribute  DocumentType      doctype;
  readonly attribute  DOMImplementation implementation;
  readonly attribute  Element           documentElement;
  Element             createElement(in DOMString tagName)
                                    raises(DOMException);
  DocumentFragment   createDocumentFragment();
  Text               createTextNode(in DOMString data);
  Comment            createComment(in DOMString data);
  CDATASection       createCDATASection(
                              in DOMString data)
                              raises(DOMException);
  ProcessingInstruction createProcessingInstruction(
                              in DOMString target, 
                              in DOMString data)
                              raises(DOMException);
  Attr               createAttribute(in DOMString name)
                              raises(DOMException);
  EntityReference    createEntityReference(
                              in DOMString name)
                              raises(DOMException);
  NodeList           getElementsByTagName(
                              in DOMString tagname);
};

Interface: Element

interface Element : Node {
  readonly attribute DOMString            tagName;
  DOMString          getAttribute(in DOMString name);
  void               setAttribute(in DOMString name, 
                                  in DOMString value)
                                  raises(DOMException);
  void               removeAttribute(in DOMString name)
                                  raises(DOMException);
  Attr               getAttributeNode(
                                  in DOMString name);
  Attr               setAttributeNode(in Attr newAttr)
                                  raises(DOMException);
  Attr               removeAttributeNode(
                                  in Attr oldAttr)
                                  raises(DOMException);
  NodeList           getElementsByTagName(
                                  in DOMString name);
  void               normalize();
};

DOM Level 1, HTML

DOM Interface Vererbung

DOM Interface Vererbung (---)
und Elementbeziehungen (...)

Eingabe:

Spezifiziert den HTML Teil:

Interface: HTMLDocument

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;
  void                open();
  void                close();
  void                write(in DOMString text);
  void                writeln(in DOMString text);
  Element             getElementById(
                         in DOMString elementId);
  NodeList            getElementsByName(
                         in DOMString elementName);
};

Interface: HTMLElement

interface HTMLElement : Element {
           attribute  DOMString            id;
           attribute  DOMString            title;
           attribute  DOMString            lang;
           attribute  DOMString            dir;
           attribute  DOMString            className;
};

Interfaces zu Link, UL, LI, P, IMG

interface HTMLLinkElement : HTMLElement {
           attribute  boolean              disabled;
           attribute  DOMString            charset;
           attribute  DOMString            href;
           attribute  DOMString            hreflang;
           attribute  DOMString            media;
           attribute  DOMString            rel;
           attribute  DOMString            rev;
           attribute  DOMString            target;
           attribute  DOMString            type;
};
interface HTMLUListElement : HTMLElement {
           attribute  boolean              compact;
           attribute  DOMString            type;
};
interface HTMLLIElement : HTMLElement {
           attribute  DOMString            type;
           attribute  long                 value;
};
interface HTMLParagraphElement : HTMLElement {
           attribute  DOMString            align;
};
interface HTMLImageElement : HTMLElement {
           attribute  DOMString            lowSrc;
           attribute  DOMString            name;
           attribute  DOMString            align;
           attribute  DOMString            alt;
           attribute  DOMString            border;
           attribute  DOMString            height;
           attribute  DOMString            hspace;
           attribute  boolean              isMap;
           attribute  DOMString            longDesc;
           attribute  DOMString            src;
           attribute  DOMString            useMap;
           attribute  DOMString            vspace;
           attribute  DOMString            width;
};

Bindungen für ECMA-Script

IDL Bezeichnung ECMA-Script
interface Object
attribute property, Eigenschaft
method method, Funktion
DOMString String
unsigned long int, oder long
Bezeichner bleiben gleich

Bemerkungen

Unterschiede zwischen NS und IE

var bName = navigator.appName;
var coll = "";
var styleObj = "";
var dhtml = 0;

var bVer = parseInt(navigator.appVersion);
if (bName == "Netscape" && bVer >= 4) { br ="n4"; dhtml = 1; }
  else if (bName == "Netscape" && bVer == 3) { br ="n3"; }
  else if (bName == "Netscape" && bVer == 2) { br ="n2"; }
  else if (bName == "Microsoft Internet Explorer" && bVer >= 4) {
          br ="e4"; dhtml = 1;
          coll = "all."; styleObj = ".style"
       }
  else if (bName == "Microsoft Internet Explorer") { br ="e3"; }
else { br = "n2"; }
function getObj(obj){
  if ( (dhtml==1) && (typeof obj == "string") ){
     var xobj = eval ("document."+coll+obj+styleObj)
     return xobj; }
  else { return obj; }
}
function show_propsobj(obj, obj_name) { 
    var result = ""; 
    var xobj = getObj(obj);
    for (var i in xobj) 
        result += obj_name + "." + i + " = " + xobj[i] + "\n"; 
    return result; 
} 
Eingabe:
<FORM name="anzeigeobj">
  Eingabe: 
  <INPUT TYPE="Text" name="eingabe" value="" size="40">
  <INPUT TYPE="BUTTON" value="show_propsobj(Eingabe)" 
         onClick="alert(show_propsobj(document.anzeigeobj.eingabe.value,
                  document.anzeigeobj.eingabe.value));">
</FORM>

Ausblick

DOM Level 2

Änderungen gegenüber Level 1

Stilvorlagen allgemein

CSS Stilvorlagen

Ereignisse

Weitere Interfaces

DOM und XML


Zusammenfassung

Objektbaum
Objektbaum nach dem Parsen

 

Objektbaum modifiziert
Objektbaum nach Modifikation durch CSS

 

HTML+CSS+JS+DOM
Zusammenspiel der Einzelteile

© Universität Mannheim, Rechenzentrum, 1998-2000.

Heinz Kredel
Last modified: Thu Jan 13 22:00:21 MET 2000