DOM-Einführung W3C-Document-Object-Model

DOM ist eine Abkürzung für Document-Object-Model. DOM bezeichnet eine W3C-Programmierschnittstelle (API) für HTML/XHTML/XML-Dokumente. W3C beschreibt hier die DOM Core Spezifikationen .

DOM- und ECMAScript-Objekte Wie unterscheiden sich diese?

ECMAScript-Objekte sind von DOM-Tag-Objekten zu unterscheiden. Zu DOM-Tag-Objekten können dokumentenspezifische Besonderheiten hinzu kommen.

Browser-Objekt-Hierarchie (Herstellerspezifisch) |---- window

Bei Browsern sind neben der Objekt-Hierarchie auch die unterstützten Mime Types wesentlich. Hier ist eine Toolchen zum abfragen der eingebauten Browser Mime Types.

Die folgenden Browser-Objekte waren zunächst firmenspezifisch (NS-Browser, Netscape's traditional model) und wurden von anderen Browser-Entwicklern nachgebildet und übertroffen. Bei Cross-Browser-Entwicklungen wird auch heute noch (2014) die gemeinsame Schnittmenge an Funktionen verwendet.

Vom window-Objekt   kann doc abgeleitet werden:   var doc = window.document; 
Vom document-Objekt kann win abgeleitet werden:   var win = doc.parentWindow || doc.defaultView;
 Baum der NS-Objekt-Verwandtschaftsbeziehungen
 =============================================
 |---- window
       |----  frames
       |----  document
              |----   all
              |       |---- style
              |----   anchors
              |----   applets
              |----   embeds
              |----   forms
              |       |---- elements
              |             |---- options
              |       |---- images
              |       |---- layers
              |       |---- links 
              |       |---- location
              |---- event
              |---- history
 |---- Array
 |---- Boolean
 |---- Date
 |---- Function
 |---- Math
 |---- navigator
       |---- mimeTypes
       |---- plugins
 |---- Number
 |---- RegExp
 |---- screen
 |---- String

Die obige NS-Objekthierarchie wird nach wie vor durch die Browser ( z.T. unterschiedlich ) unterstützt (Beispiel: history.back()) Brrowserabhängig gibt es firmenspezifische Erweiterungen.

Die DOM-Schnittstelle (W3C) ist eine eine firmenunabhängige, vereinheitlichte Schnittstelle ( siehe z.B. W3C HTML 5 DOM , HTML 5 Window Object , ).

Beispiel: proprietäre Objekt-Schreibweise

Als Beispiel für diese "alte" Objekt-Schreibweise wird ein Bookmarklet angegeben, das in der Adresszeile des Browsers (ohne Umbrüche und unnötige Blanks) ausgeführt werden kann und von allen Frame-Seiten die Titel-Tag-Inhalte anzeigt.

javascript: function ff(x) { alert(x.document.title)};
var i, t = top; 
if(!t){ ff(self);
} else {t=t.frames; 
  for(i=0; i < t.length; i++) { ff(t[i]); }
}

Hier ein Test

Beispiel: Width/Height für NC/IE-Objekte

Hier ein Beispiel für firmenspezifische Objekt-Funktionen (z.T. für ältere Versionen):

                 Netscape                IE
------------------------------------------------------------------------------
Fenster-Innengröße: 
                 win.innerWidth       doc.body.clientWidth
                 win.innerHeight      doc.body.clientHeight
Dokumentgröße: 
                 doc.width            doc.body.scrollWidth
                 doc.height           doc.body.scrollHeight
Scroll-Position:
       xScroll = win.pageXOffset;     doc.body.scrollLeft||doc.documentElement.scrollLeft;
       yScroll = win.pageYOffset;     doc.body.scrollTop ||doc.documentElement.scrollTop;


DOM Level 0, 1, 2, 3 W3C-

Das W3C bemüht sich um (weltweit) patentfreie (Internet-) Empfehlungen (Quasi-Standards).

Håkon Wium Lie: Interview (Englisch) von Herbert Braun mit Håkon Wium Lie (2010):

"Zum anderen hat sich das W3C entwickelt. In den alten Tagen war es eine Sache von wenigen Monaten, einen Arbeitsentwurf zu einer Empfehlung zu machen. Heute muss man zu Kommentaren aufrufen, all diese Kommentare beantworten, sicherstellen, dass es zwei Implementierungen gibt und so weiter. Der formale Prozess dauert viel länger und nur Spezifikationen mit ernsthaften Befürworten schaffen es zur Empfehlung."

Das Document Object Model (DOM) entspricht einer Programmierschnittstelle (API) für den Zugriff auf Elemente und Teilstrukturen von HTML/XHTML/XML-Dokumenten.

2005-06-27: Internet-Draft Scripting Media Types 
2005-01-19: DOM Level 2 errata has been updated with html-1 and html-2. 
2004-04-07: Level 3 Core and  DOM  Level 3 Load and Save are now W3C Recommendations. 
2004-02-26: Level 3 XPath has been republished as a Working Group Note. 
2004-02-26: Level 3 Views and Formatting has been republished as a Working Group Note. 
2004-02-26: Level 3 Requirements has been republished as a Working Group Note. 
2004-01-27: Level 3 Validation is now a Recommendation. 

Das de.wikipedia: DOM (Document Object Model) entspricht einer Programmierschnittstelle (API) für den Zugriff auf Elemente und Teilstrukturen von HTML/XHTML/XML-Dokumenten.

Ein Objekt ist ein Begriff für Methoden und Daten, die zusammengehören. DOM ist ein Akronym für Document Object Model von W3C.

DOM Level 0 bezeichnet (alte, firmenspezifische) propritäre JavaScript-Techniken
            zum Zugriff auf HTML-Dokumente (eingeführt vor der W3C-Standardisierung
            mit Webbrowsern Netscape Navigator, Internet Explorer).

DOM Level 1 (DOM Core, DOM-Kern)
            definiert das Durchlaufen im DOM-Elemente-Baum, Manipulationsmöglichkeiten
            der Knoten, wie Elemente-Erzeugen, Elemente-Einfügen, Attribute-Manipulieren.

DOM Level 2
            DOM Core, XML-Namensraum-Unterstützung, XML-Namensraum-Unterstützung,
            DOM Style und DOM CSS für das dynamische Auslesen, Hinzufügen und Ändern 
            von Formatierungen, CSS, Stylesheets. DOM Events standardisieren die 
           (Netscape Navigators/Internet Explorer) Verarbeitung von Ereignissen.

DOM Level 3
           Erweiterung für bessere Ausnahmebehandlung und Umgang mit Zeichenkodierungen
           Parsen von XML-Dokumenten in Zeichenketten in Dokument-Objekte, XMLHttpRequest,
           XPath für Knoten-Auswahl. 

Die DOM-Schnittstelle (W3C) steht im Zusammenhang mit dem W3C HTML 5 Window Object . Einige Links zu DOM-Infos:
w3.org Referenzseiten
wikipedia wikipedia (de, DOM = Document Object Model)
wikipedia wikipedia (en, DOM = Document Object Model)
selfhtml.org Einführung in ECMAScript und DOM



DOM-Objekt-Hierarchie |---- window

W3C definierte die firmenunabhängige DOM-Schnittstelle. DOM ist eine Abkürzung für das Document Object Model, das als API (Application Programming Interface) beschreibt, wie programmier-sprachen-unabhängig auf HTML- oder XML-Dokumenten-Objekte zugegriffen werden kann.

Hier werden von W3C DOM Core Spezifikationen beschrieben.

Das DOM-Modell besteht aus Knoten (Nodes), die Dokumente, Elemente und Attribute enthalten. Das DOM-Modell entspricht einer Baumstruktur im Hauptspeicher.

 Baum der DOM-Objekt-Verwandtschaftsbeziehungen
 ==============================================
 |---- NodeList              - Array verschiedener Node-Objekte
 |---- NamedNodeMap          - Array verschiedener Node-Objekte mit Namen
 |---- DOMImplementation     - für JavaScript unbedeutender Objekttyp
 |---- Node                  - DOM-Grundobjekt
       |
       |---- CharacterData   - übergeordneter Typ für Zeichenketten im Dokument
             |---- Text      - Typ für Zeichenketten im Dokument
             |---- Comment   - nach DOM3 typgleich mit CharacterData
             |---- CDATASection - nach DOM3 typgleich mit CharacterData
 |---- Attr                  - Attribute von Elementen
 |---- ProcessingInstruction - Ausführungsanweisungen
 |---- Element               - Elemente des Dokuments
 |---- DocumentType          - Typinformation eines Dokuments
 |---- DocumentFragment      - nach DOM3 typgleich mit Node
 |---- EntityReference       - nach DOM3 typgleich mit Node
 |---- Document              - Prototyp eines Dokuments (Objekt document)


DOM und ECMAScript Event Reference

Hier werden von W3C DOM Core Spezifikationen beschrieben.

Ereignisse (Events) werden normalerweise in Verbindung mit ECMAScript -Aufrufen verwendet. Diese Funktionen müssen vor dem ersten Aufruf definiert werden (meist im XHTML-Header).

Ist z.B. in einem a-Tag ein onclick="return myFunct(this)" eingetragen, so ruft der ECMAScript-Event-Handler bei einem Klick auf das a-Tag die Function myFunct(this) auf, wobei hier durch das eigene XHTML-Objekt als this-Parameter übergeben wird. Von dem this-Objekt aus kann der DOM-Objekt-Baum durchlaufen werden.

Gibt onclick="return myFunct(this)" dden Wert false zurück, so wird href="..." nicht mehr ausgeführt.

Welche Ereignisse (Events) können mit ECMAScript bei XHTML verwendet werden? Die nachfolgenden Events sind lediglich exemplarisch. Siehe event handler IDL attributes

Funktion Bemerkung  Beispiel
onabort Loading of an image is interrupted  
onblur An element loses focus  <input type="text" onblur="myfunc()">
onchange The user changes the content of a field  <input type="text" id="id" onblur="myfunc(this.id)">
onclick Mouse clicks an object  <button onclick="document.getElementById('id2').value= document.getElementById('id1').value"<Copy Text</button>
ondblclick Mouse double-clicks an object   siehe onclick
onerror An error occurs when loading a document or an image  
onfocus An element gets focus ECMAScript -Funktion:
function setStyle(x){
    document.getElementById(x).style.background="#fff"; }
<input type="text" id="id1" onfocus="setStyle(this.id)">
onkeydown A keyboard key is pressed
<script type="text/javascript">
function noNumbers(e){
 var keynum, keychar, numcheck;
 if(window.event) {// IE
    keynum = e.keyCode;
  } else if(e.which){ // Netscape/Firefox/Opera
    keynum = e.which;
  }
 keychar = String.fromCharCode(keynum);
 numcheck = /\d/;
 return !numcheck.test(keychar);
}
</script>
<form action="">
<input type="text" onkeydown="return noNumbers(event)" />
</form>
onkeypress A keyboard key is pressed or held down  
onkeyup A keyboard key is released   siehe onkeydown
onload A page or an image is finished loading
<html><head>
<script type="text/javascript">
function load(){
 window.status="Page is loaded";
}
</script>
</head>
<body onload="load()">
...
</body>
</html>
onmousedown A mouse button is pressed
<html><head>
<script type="text/javascript">
function whichElement(e){
 var targ;
 if (!e) { var e = window.event; }
 if (e.target) { targ = e.target; }
 else if (e.srcElement) { targ = e.srcElement; }
 if (targ.nodeType == 3) {// defeat Safari bug
   targ = targ.parentNode;
 } var tname=targ.tagName;
 alert("You clicked on a "+tname+" element.");
}
</script>
</head>
<body onmousedown="whichElement(event)">
<h2>This is a header</h2>
<img border="0" src="my.gif" alt="Bild">
</body>
</html>
onmousemove The mouse is moved  
onmouseout The mouse is moved off an element  
onmouseover The mouse is moved over an element
<html><head>
<script type="text/javascript">
function mouseOver(){
 document.b1.src ="blue.gif";
}
function mouseOut(){
 document.b1.src ="red.gif";
}
</script>
</head>
<body>
<a href="http://..." target="_blank"
 onmouseover="mouseOver()" onmouseout="mouseOut()">
 <img src="red.gif" name="b1" alt="..." /></a>
</body>
</html>
onmouseup A mouse button is released  
onreset The reset button is clicked
<form onreset="return confirm('loeschen?')" action="">
<input type="text" name="NAME" value="" />
<input type="reset" value="Reset">
</form>
onresize A window or frame is resized
<body onresize="alert('changed widow-size')">
onselect Text is selected
<textarea cols="20" rows="5"
  onselect="alert('text-selected')">
Hello world!
</textarea>
onsubmit The submit button is clicked
<form action="javascript:alert('gesendet')"
      onsubmit="return confirm('senden?')">
<input type="text" name="NAME" />
<input type="submit" value="Senden" />
</form>
onunload The user exits the page
<body onunload="alert('onunload event')">


DOM und Browser-Quirks z.B. setAttribute()

.getAttribute und .setAttribute werden zurzeit (2014) von einigen Browsern nicht/nicht richtig/ nicht vollständig unterstützt. Bei Cross-Browser-Entwicklungen wird versucht, solche Mängel auszugleichen. Es kann z.B. mit obj.property = value gearbeitet werden.

Bei manchen Browsern muß anstelle des Attribut-Namens class (war/ist? ein reservierter Name) der "firmenspezifische Namen className verwendet werden. Bei manchen älteren Browsern funktioniert createElement() auf "firmenspezifische Art" und ein childNodes-Array kann manchmal noch "falsche Rückgaben" haben.

Wie solches "gewrappt"? Beispiel: Für Zugriff auf Element-Properties könnten die folgenden Funktionen nützlich sein.

function get_attr(el, attr) {
  if (attr === "class") {return el.className;
  } else if (attr === "style") {return el.style.cssText;
  } else if (attr === "checked") {return el.defaultChecked;
  } else if (attr === "for") {return el.htmlFor;
  } else { return el.getAttribute(attr); }
}

function set_attr(el, attr, val) {
  if (attr === "class") {el.className = val;
  } else if (attr === "style") {el.style.cssText = val;
  } else if (attr === "checked") {el.defaultChecked = val;
  } else if (attr === "for") {el.htmlFor = val;
  } else { el.setAttribute(attr, val); }
}
DOM und Bibliotheken Wozu? Wie?

Es gibt zahlreiche Bibliotheken, die versuchen, eine einheitliche Cross-Browser-Konformität anstreben und "auf Dauer" gewährleisten möchten. Hier lediglich einige Hinweise zu Funktionalitäten, die benötigt werden.

Ausgehend von einem aktuellen Element kann das Parent-Element gesucht werden, das einen bestimmten Tagnamen hat.

function get_parent(el, parent_tagName) { // el kann auch id-String sein
var ptn = parent_tagName.toLowerCase();
if (typeof el === 'string') { el = get_obj(el); }
while ((el = el.parentNode)) {
  if (ptn === el.nodeName.toLowerCase()) { break; }
} return el;
}

Ausgehend von einem aktuellen Element können in einen Array die Kindelemente gesammelt werden, die einen bestimmten Tagnamen haben.

function get_childs(el, child_tagName) { // el kann auch id-String sein
var i, j = 0, r = [], c, ctn = child_tagName.toLowerCase();
if (typeof el === 'string') { el = get_obj(el); }
c = el.childNodes;
for (i = 0; i < c.length; i += 1) {
  if (c[i].nodeType !== 1) { continue; }
  if (ctn === c[i].nodeName.toLowerCase()) { r[j] = c[i]; j+=1; }
} return r;
}


DOM und documentFragment-Objekt document.querySelectorAll()

Ein Aufruf document.getElementsByTagName(tagName) liefert einen Array von Elementen des Dokumentes. Der Array enthält die Elemente, aber keine hirarchischen Struktur-Informationen.

Beispiel 1: Für ul, ol, dl-Listen gibt es die folgende Zugriffsmöglichkeit:

var
dl = win.document.getElementById(my_id),
dt = dl.getElementsByTagName('dt'),
dd = dl.getElementsByTagName('dd');

Beispiel 2: Um einen Array mit allen DOM-Elementen zu bekommen,

Beispiel 3: Um einen Array mit allen DOM-Elementen zu bekommen, die ein bestimmtes Attribut haben, wird eine Funktion get_elements_by_attr benötigt.

Beispiel 3: Der Zugriff auf einen DOM-Teilbaum, der "irgengwie" aufgebaut sein kann, wird recht oft benötigt. Die Objekte des Teilbaumes können manipuliert und als Ganzes zurückgestellt (gerendert) werden. Dies wird noch nicht durch das documentFragment-Objekt von DOM Level 3 erreicht.

Die folgende "Ersatzfunktion" ist kompliziert und nutzt rekursive walk-Aufrufe (Dank an Crockford). Ausgehend von einem aktuellen ( root- ) Element ele werden in einen Array alle Sub-Element mit tagName und einem bestimmten className gesammelt und zurück gegeben.

function get_elements(ele, tagName, className) {
  var el, r = [],
  walk_dom = function walk(el, fn) { fn(el); el = el.firstChild;
    while (el) { walk(el, fn); el = el.nextSibling; }
  };
  if (typeof ele === 'string') { ele = get_obj(ele); }
  if (!ele) { win.alert("error: dom.get_elements(ele?,...)"); return r; }
  el = ele;
  walk_dom(el,
  function (el) {
    if (!(el && el.nodeType === 1)) { return; }
    if (className && tagName &&
        className === el.className.toLowerCase() &&
        tagName === el.tagName.toLowerCase()) {
      r.push(el);
    } else if (tagName && tagName === el.tagName.toLowerCase()) {
      r.push(el);
    } else if (className && className === el.className.toLowerCase()) {
      r.push(el);
    }
  }
); return r;
}


Beispiel 4: Verwenden von document.querySelectorAll()

<script type="text/javascript"> //<![CDATA[
var win = window, doc = win.document,
dl = doc.querySelectorAll("#DL1"),
dt = doc.querySelectorAll("#DL1 > dt"), dt0 = dt[0].innerHTML,
dd = doc.querySelectorAll("#DL1 > dd"), dd0 = dd[0].innerHTML,
ta0 = document.querySelectorAll("form")[0].elements.TA0.innerHTML;

// einfach:
// function $(s) { document.querySelectorAll(s); }


function $(s_or_form_idx, ele_name) { // mit form[i]
  var r = null, s = s_or_form_idx;
  if (typeof s === 'string') {
    r = document.querySelectorAll(s);
  } else if (typeof s === 'number') {
    r = document.querySelectorAll("form")[s_or_form_idx].elements[ele_name];
  } return r;
}
//]]>
</script>

Teste: Bitte Anzeigen von ...

document.querySelectorAll("dl").length
document.querySelectorAll("#DL1").length
document.querySelectorAll("#DL1 > dt").length
document.querySelectorAll("#DL1 > dd").length

document.querySelectorAll("#DL1 > dt")[0].innerHTML

document.querySelectorAll("form")[0].elements.TA0.innerHTML
$("dl").length
$("#DL1").length
$("#DL1 > dt").length
$("#DL1 > dd").length
$("#DL1 > dt")[0].innerHTML
$("#DL1 > dd")[0].innerHTML

$(0,"TA1").innerHTML








Beispiele: Wie wird mit DOM programmiert?

Der DOM-Tree eines Dokumentes besteht aus geschachtelten Knoten (Nodes) und Kind-Knoten. Jeder Knoten kann Attribute enthalten. Das a-Tag enthält z.B. das href="..."-Attribut. Ein Knoten kann z.B. ein Element (Tag) oder ein Text oder ein Kommentar (und mehr) sein. Das folgende Beispiel enthält eine unsortierte Liste, die sich in einem div-Tag befindet.
Clip (engl: The essentials of DOM scripting in 10 minutes)

XHTML Nodes

XHTML-Tags etwa:

 <div id="header">
  <img src="..." alt="..." />
 </div>
 <div id="navigation">
  <ul id="nav">
   <li><strong>Home</strong></li>
   <li><a href="...">w3-DOM</a></li>
   <li><a href="...">wiki-DOM</a></li>
   <li><a href="...">FAQ's</a></li>
  </ul>
 </div>

Grafisch kann der Tag-DOM-Tree etwa so dargestellt werden:

[-] html

    [+] head
    
    [-] body
     |     
     |  [-] div
     |   |       
     |   |  [-] ul
     |   |   |  
     |   |   |  [+] li
     |   |   |       
     |   |   |  [-] li
     |   |   |  
     |   |   |   |  [-] a
     |   |   |   |        #text
     |   |   |   |       
     |   |   |  [+] li
     |   |   |  
     |   |   |  [+] li
     |   |   |  
     |  [+] div
     |  
     |  [+] div

Wie kann der Zugrif (retrieval) erfolgen? document.getElementById("header") gibt das Element mit id="header" zurück
document.getElementsByTagName("a") gibt einen Array von a-Tags-Elementen zurück

DOM-Retrieval
Gegeben sei XHTML:
<ul id="nav">
  <li> <strong> Home </strong> </li>
  <li> <a href="..." > w3-DOM </a> </li>
  <li> <a href="..." > wiki-DOM </a> </li>
  <li> <a href="..." > FAQ's </a> </li>
</ul>
DOM Bemerkunegn
var nav = document.getElementById("nav")

var ok = nav.hasChildNodes();

var li = nav.childNodes;
nav entspricht dem <ul id="nav">...</ul>-Teilbaum
(incl. aller li-Tags mit deren Teilbäumen).
li[0] entspricht nav.firstChild, d.h. dem [0]-ten li-Element
li[li.length-1] entspricht nav.lastChild, d.h. dem [3]-ten li-Element
nav.item(2) entspricht dem [2]-ten li-Element
ok ist true bzw. false
DOM Bemerkungen
var nav = document.getElementById("nav")
var li = nav.getElementsByName("li");
var len = li.length;
var li2 = li[2];
var li1 = li2.previousSibling;
var li3 = li2.nextSibling;
var ul = li2.parentNode;


var a2 = li2.firstChild;
li entspricht einem Array der li-Tags enthält
len ist 4
li2 entspricht dem [2]-ten-li-Tag (Index läuft ab 0)
li1 entspricht li[1]
li3 entspricht li[3]


a2.nodeName kann den node-Namen (hier z.B. A) oder #textNode zurück geben.
a2.nodeType kann den Wert 1 (hier z.B. 1) für ein Element oder 3 für Text haben.
a2.nodeValue hat für ein Element-Knoten den Wert null oder bei einem Text-Knoten den Text als Rückgabewert.
var nav = document.getElementById("nav")
var a2 = nav.getElementsByName("a")[2]
a2.firstChild.nodeValue = "neu";
"wiki-DOM" wird durch "neu" ersetzt
Node-Properties (Element/Text)
Gegeben sei XHTML:
<ul id="nav">
  <li> <strong> Home </strong> </li>
  <li> <a href="..." > w3-DOM </a> </li>
  <li> <a href="..." > wiki-DOM </a> </li>
  <li> <a href="..." > FAQ's </a> </li>
</ul>
Knoten-Attribute Lesen und Schreiben
DOM Bemerkungen
var a2_neu = document.getElementById("nav")
.getElementsByName("li")[2]
.firstChild
.setAttribute("href","http://...")
.setAttribute("target","_blank")
.getAttribute(att) gibt den Attribut-Wert zurück
.setAttribute(att, value) setzt den Attribut-Wert
Ein Attribut kann direkt verwendet werden, ohne vorher erzeugt (create) worden zu sein (hier: ("target","_blank").
Child-Knoten löschen
var nav = document.getElementById("nav");
var li2 = nav.getElementsByName("li")[2];
nav.removeChild(li2);
In "nav" befinden sich die <li>-Elemente. Das [2]-li-Element wird gelöscht.
Child-Knoten hinzufügen
var d = document;
var nav = d.getElementById("nav");
var new_li = d.createElement("li");
nav.appendChild(new_li);
In "nav" befinden sich die <li>-Elemente, an die ein leeres <li></li>-Element am Ende angefügt wird.
Child-Knoten vor ein Element einfügen
var d = document;
var nav = d.getElementById("nav");
var new_p = d.createElement("p");
var t = d.createTextNode("Menu:");
p.appendChild(t);
nav.parentNode.insertBefore(nav, new_p)
In "nav" befinden sich die <li>-Elemente, an die ein leeres <li></li>-Element am Ende angefügt wird.
Child-Knoten ersetzen
var d = document;
var nav = d.getElementById("nav");
var new_li = d.createElement("li");
var t = d.createTextNode("letztes li");
new_li.appandChild(t);
nav.replaceChild(new_li, nav.lastChild);
In "nav" befinden sich die <li>-Elemente. Das letzte li-Element ist ein leeres <li></li>-Element, das ersetzt werden soll.
Cloning Nodes
var d = document;
var nav = d.getElementById("nav");
var li2 = nav.getElementsByName("li")[2];
var dolly = li2.cloneNode(true);
nav.insertBefore(dolly, li2);
div an body
<style type="text/css">
.dynamicDiv {width:200px;height:100px;
border:solid 1px #c0c0c0;
background-color:#e1e1e1;
font-size:11px;
font-family:verdana;
color:#000;
padding:5px;
}
</style>
// js
function create_div(){
 var divTag = document.createElement("div");
 divTag.id = "div1";
 divTag.setAttribute("align","center");
 divTag.style.margin = "0px auto";
 divTag.className = "div_dynamisch";
 divTag.innerHTML = "Div-Tag (dynamisch)";
 document.body.appendChild(divTag);
}


Beispiele: CSS-DOM-jQuery-Schreibweisen
CSS DOM jQuery
#myid a { ... } document.getElementById('myid').getElementsByTagName('a') $('#myid a')
#myid a.myclass { ... }
function getElementsByClassName(className, tag, elm){
  var re = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
  var tag = tag || "*";
  var elm = elm || document;
  var el = (tag == "*" && elm.all)?
           elm.all : elm.getElementsByTagName(tag);
  var ei, r = [];
  for(var i=0; i<el.length; i++){
    ei = el[i];
    if(re.test(ei.className)) {
      r.push(ei);
    }
  } return r;
}
//Alternative:
document.getElementsByClassName = function(cl) {
  var r = [];
  var re = new RegExp("\\b"+cl+"\\b");
  var el = this.getElementsByTagName("*");
  for (var i = 0; i < el.length; i++) {
    var c = el[i].className;
    if (re.test(c)) r.push(el[i]);
  } return r;
};
$('#myid a.myclass');


Beispiel: Programmieren von DOM-Tabellen

Zum Programmieren von DOM-Tabellen können verfügbare Funktonen verwendet werden, wie z.B.

createCaption()   Tabellenüberschrift-Element caption erzeugen 
createTFoot()     Tabellenfuß-Element tfoot erzeugen 
createTHead()     Tabellenkopf-Element thead erzeugen 
deleteCaption()   Tabellenüberschrift-Element caption löschen 
deleteTFoot()     Tabellenfuß-Element tfoot löschen 
deleteTHead()     Tabellenkopf-Element thead löschen 
deleteRow()       Tabellenzeile löschen 
insertRow()       Tabellenzeile hinzufügen

Beispiel zum Programmieren von DOM-Tabellen mit ECMAScript



XDOM (XML - Document Object Model)
 Baum der DOM-Objekt-Verwandtschaftsbeziehungen
 ==================================================
 XmlNode(Node)
 |
 |--- XmlDocument(Document)                   - representiert ein XML-Document
 |    |
 |    |--- XmlDataDocument                    - kann strukturierte Daten speichern,suchen,manipulieren
 |    
 |--- XmlDocumentFragment(DocumentFragment)   - "lightweight" Object (tree insert operations)
 |--- XmlEntity(Entity)                       - entspricht der Entity-Declaration:   <!ENTITY ... >
 |--- XmlNotation(Notation)                   - entspricht der Notation-Deklaration: <!NOTATION ... >
 |--- XmlAttribute(Attr)                      - representiert Attribute (default-Werte ausDTD)
 |--- XmlLinkedNode                           - für benachbarte node's
      |
      |--- XmlCharacterData(CharacterData)    - Manipulationsmethoden für Text
      |    |
      |    |--- XmlComment(Comment)           - entspricht dem Content vom XML-Comment
      |    |--- XmlText(Text)                 - entspricht dem Text-Content von Element oder Attribut
      |    |--- XmlCDataSection(CDATASection) - entspricht CDATA section
      |    |--- XmlWhitespace                 - entspricht white space im element-content
      |    |--- XmlSignificantWhitespace      - xml:space= 'preserve' scope
      |     
      |--- XmlElement(Element)                - entspricht in DOM nodes 
      |--- XmlDeclaration                     - entspricht <?xml version='1.0' ...?>
      |--- XmlDocumentType(DocumentType)      - entspricht <!DOCTYPE ...?>
      |--- XmlEntityReference(EntityReference)- entspricht: entity reference node
      |--- XmlProcessingInstruction(ProcessingInstruction)

Nicht von XmlNode abgeleitet sind:

 |---  XmlImplementation(DOMImplementation)
 |---  XmlNodeList(NodeList)                  - entspricht: ordered collection of nodes
 |---  XmlNamedNodeMap(NamedNodeMap)          - entspricht: nodes-collection mit "by name"- oder "index"-Zugriff
       |
       |--- XmlAttributeCollection
 |--- XmlNodeChangedEventArgs


Beispiel: insert_last_modified(document) MDI-Funktion

Um an das Ende einer Seite das last_modified-Datei-Datum anzufügen, werden die DOM-Funktionen .createElement(), .setAttribute(), .appendChild(), new Date(),.getMinutes(),.getDate(),.getMonth().getFullYear(),t.getHours() verwendet. Das last_modified-Datei-Datum wird am Dokument-Ende als innenHTML eines a-Elementes angezeigt. Ein Klick auf das a-Element ruft den Link http://validator.w3.org/check?uri=referer für der W3C-Validierer auf.

Code Snippet:
.createElement(), .setAttribute(), .appendChild(),
new Date(),.getMinutes(),.getDate(),.getMonth().getFullYear(),t.getHours()
  1. insert_last_modified: function (win) {
  2.   var p, span, a, url, nr, doc = (win.document) ? win.document : win,
  3.  
  4.   t = new Date(doc.lastModified), m = t.getMinutes(),
  5.   str = 'Stand: ' + t.getDate() + '.' + (t.getMonth() + 1) + '.' +
  6.   t.getFullYear() + ' (' + t.getHours() + ':' + ('0' + m).slice(-2) + ')';
  7.  
  8.   for (i = 0; i < frames.length; i += 1) {
  9.       if (frames[i].document === doc) { nr = i; break; }
  10.   }
  11.   if (('' + frames[nr].location).indexOf('http') === -1) {url = "http://validator.w3.org/#validate_by_upload";
  12.   } else { url = "http://validator.w3.org/check?uri=referer"; }
  13.   p = doc.createElement('p');             // erzeuge ein leeres p-Ele
  14.   p.setAttribute('align', 'center');      // füge dem p-Ele property=value hinzu
  15.   p.appendChild(doc.createElement('br')); // füge an dem p-Ele das erzeugte br-Ele hinten hinzu
  16.   a = doc.createElement('a');             // erzeuge ein leeres a-Ele
  17.   a.setAttribute('target', '_blank');     // füge dem a-Ele property=value hinzu
  18.   a.setAttribute('title', 'W3C-online-Validator');//füge dem a-Ele property=value hinzu
  19.   a.setAttribute('href', url);            // füge dem a-Ele property=value hinzu
  20.   a.appendChild(doc.createTextNode(str)); // füge dem a-Ele erzeugten Text als innerHTML hinten hinzu
  21.   pre = doc.createElement('pre');         // erzeuge ein leeres pre-Ele
  22.   pre.appendChild(a);                     // füge dem pre-Ele das a-Ele hinten hinzu
  23.   p.appendChild(pre);                     // füge dem p-Ele das pre-Ele hinten hinzu
  24.   doc.body.appendChild(p);                // füge document.body das p-Ele hinten hinzu
  25. },

Um an das Ende einer Seite das last_modified-Datei-Datum anzufügen, werden die DOM-Hilfsfunktionen .create(tagName), .text(str), .attr(o, prop, val), .append(o, childobj) verwendet. Das last_modified-Datei-Datum wird am Dokument-Ende als innenHTML eines a-Elementes angezeigt. Ein Klick auf das a-Element ruft den Link http://validator.w3.org/check?uri=referer für der W3C-Validierer auf.

Code Snippet: Hilfsfunktionen .create(tagName), .text(str), .attr(o, prop, val), .append(o, childobj)
  1. // Hilfsfunktionen:
  2. create = function (tagName, d) { d = d || doc; return d.createElement(tagName); },
  3. text = function (str, d) { d = d || doc; return d.createTextNode(str); },
  4. attr = function (o, prop, val) { o.setAttribute(prop, val); return o; },
  5. append = function (o, childobj) { o.appendChild(childobj); return o; };
  6.  
  7. insert_last_modified: function () {//unter window.onload=function(){dom.insert_last_modified();}
  8.   var p, span, a, url, t = new Date(doc.lastModified), m = t.getMinutes(),
  9.   str = 'Stand: '+t.getDate()+'.'+(t.getMonth() + 1)+'.'+t.getFullYear()+'(Uhrzeit '+t.getHours()+':';
  10.   if (m.length < 2) { m = '0' + m; } str += m + ')';
  11.  
  12.   if (('' + win.location).indexOf('http') === -1) {url="http://validator.w3.org/#validate_by_upload";
  13.   } else { url = "http://validator.w3.org/check?uri=referer"; }
  14.  
  15.   p = create('p');                 // erzeuge ein leeres p-Tag-Objekt
  16.   p = attr(p, 'align', 'center');  // füge dem p-Tag property=value hinzu
  17.   p = append(p, create('br'));     // füge im p-Tag das erzeugte br-Objekt hinten hinzu
  18.   a = create('a');                 // erzeuge ein leeres a-Tag-Objekt
  19.   a = attr(a, 'target', '_blank'); // füge dem a-Tag property=value hinzu
  20.   a = attr(a, 'title', 'W3C-online-Validator'); //füge dem a-Tag property=value hinzu
  21.   a = attr(a, 'href', url);        // füge dem a-Tag property=value hinzu
  22.   a = append(a, text(str));        // füge im a-Tag erzeugten Text als innerHTML hinten hinzu
  23.   span = create('span');           // erzeuge ein leeres span-Tag-Objekt
  24.   span = append(span, a);          // füge im span-Tag das a-Tag hinten hinzu
  25.   p = append(p, span);             // füge im p-Tag das span-Tag hinten hinzu
  26.   append(doc.body, p);             // füge document.body das p-Tag hinten hinzu
  27. },
Einige nützliche DOM-Weblinks

Sammlung von ECMAScript-, JavaScript-Links; W3C bemüht um (weltweit) patentfreie (Internet-) Empfehlungen (Quasi-Standards); de.wikipedia: DOM (Document Object Model)

Einige Links zu DOM (Document-Object-Model: Programmierschnittstelle (API) für HTML/XHTML/XML-Dokumente):


 w3.org       Referenzseiten
wikipedia    wikipedia (de, DOM)
wikipedia    wikipedia (en, DOM)
 rfc4329      (2006)

Clip         (engl: DOM scripting in 10 minutes)
 selfhtml.org DOM-Einführung