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 (...)

Document Properties:

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 4.x und IE 5.0

Unterschiede zu NS 6.x (und IE 5.5 ?)

var coll = "";
var styleObj = "";
var dhtml = 0;
var dom = 0;

if (document.getElementById) { // w3c
   dom = 1;
} else if (document.layers) {  // ns
   dhtml = 1;
} else if (document.all) {     // ms
   dhtml = 1;
   coll = "all."; styleObj = ".style";
}
function getObj(obj){
  if ( (dom==1) && (typeof obj == "string") ){
     var xobj = document.getElementById(obj);
     if (xobj.style) xobj = xobj.style;
     return xobj; }
  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; 
} 
<form name="anzeigeobj" action="none" >
  Eingabe: <code>document.</code> 
  <input type="text" name="eingabe" value="" size="40" />
  <input type="button" value="show_propsobj(eingabe)" 
         onclick="alert(show_propsobj(eval(document.forms[1].elements[0].value),'document.'+document.forms[1].elements[0].value));" 
  />
</form>
Eingabe: document.

Beispiele:

     forms[0]
     forms[1].elements[0]
     anzeige
     anzeige.style

Ausgabe mit document.write.


Ausblick

DOM Level 2

Module

Ä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-2004.

Heinz Kredel

Last modified: Wed May 26 23:40:34 CEST 2004