DOM Einführung

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')">

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

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); }


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');

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

insert_last_modified: function (win) {
var p, span, a, url, nr, doc = (win.document) ? win.document : win,
t = new Date(doc.lastModified), m = t.getMinutes(),
str = 'Stand: ' + t.getDate() + '.' + (t.getMonth() + 1) + '.' +
t.getFullYear() + ' (' + t.getHours() + ':' + ('0' + m).slice(-2) + ')';
for (i = 0; i < frames.length; i += 1) {
if (frames[i].document === doc) { nr = i; break; }
}
if (('' + frames[nr].location).indexOf('http') === -1) {url = "http://validator.w3.org/#validate_by_upload";
} else { url = "http://validator.w3.org/check?uri=referer"; }
p = doc.createElement('p'); // erzeuge ein leeres p-Ele
p.setAttribute('align', 'center'); // füge dem p-Ele property=value hinzu
p.appendChild(doc.createElement('br')); // füge an dem p-Ele das erzeugte br-Ele hinten hinzu
a = doc.createElement('a'); // erzeuge ein leeres a-Ele
a.setAttribute('target', '_blank'); // füge dem a-Ele property=value hinzu
a.setAttribute('title', 'W3C-online-Validator');//füge dem a-Ele property=value hinzu
a.setAttribute('href', url); // füge dem a-Ele property=value hinzu
a.appendChild(doc.createTextNode(str)); // füge dem a-Ele erzeugten Text als innerHTML hinten hinzu
pre = doc.createElement('pre'); // erzeuge ein leeres pre-Ele
pre.appendChild(a); // füge dem pre-Ele das a-Ele hinten hinzu
p.appendChild(pre); // füge dem p-Ele das pre-Ele hinten hinzu
doc.body.appendChild(p); // füge document.body das p-Ele hinten hinzu
},

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)

// Hilfsfunktionen:
create = function (tagName, d) { d = d || doc; return d.createElement(tagName); },
text = function (str, d) { d = d || doc; return d.createTextNode(str); },
attr = function (o, prop, val) { o.setAttribute(prop, val); return o; },
append = function (o, childobj) { o.appendChild(childobj); return o; };
insert_last_modified: function () {//unter window.onload=function(){dom.insert_last_modified();}
var p, span, a, url, t = new Date(doc.lastModified), m = t.getMinutes(),
str = 'Stand: '+t.getDate()+'.'+(t.getMonth() + 1)+'.'+t.getFullYear()+'(Uhrzeit '+t.getHours()+':';
if (m.length < 2) { m = '0' + m; } str += m + ')';
if (('' + win.location).indexOf('http') === -1) {url="http://validator.w3.org/#validate_by_upload";
} else { url = "http://validator.w3.org/check?uri=referer"; }
p = create('p'); // erzeuge ein leeres p-Tag-Objekt
p = attr(p, 'align', 'center'); // füge dem p-Tag property=value hinzu
p = append(p, create('br')); // füge im p-Tag das erzeugte br-Objekt hinten hinzu
a = create('a'); // erzeuge ein leeres a-Tag-Objekt
a = attr(a, 'target', '_blank'); // füge dem a-Tag property=value hinzu
a = attr(a, 'title', 'W3C-online-Validator'); //füge dem a-Tag property=value hinzu
a = attr(a, 'href', url); // füge dem a-Tag property=value hinzu
a = append(a, text(str)); // füge im a-Tag erzeugten Text als innerHTML hinten hinzu
span = create('span'); // erzeuge ein leeres span-Tag-Objekt
span = append(span, a); // füge im span-Tag das a-Tag hinten hinzu
p = append(p, span); // füge im p-Tag das span-Tag hinten hinzu
append(doc.body, p); // füge document.body das p-Tag hinten hinzu
},

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

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

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