DOM API-Dokumentation
DOM ist das "Document Object Model" und bezeichnet die Baumstruktur, in der Webbrowser eine HTML- oder XML-Seite im Hauptspeicher abbilden. Diese enthält ein Root-Element ("HTML" bei html-Dokumenten, "/" bei xml-Dokumenten), Verzweigungen (Knoten, Nodes), und am unteren Rand des Baumes an den Blattelementen Textdaten ("CDATA" bei xml) und Attribute. Häufig in Verbindung mit der Programmiersprache JavaScript (bei html) bzw. ECMAScript 5 (bei xml) benutzt, ist der DOM-Baum mit allen Datenobjekten (Objekte und Eigenschaften) und Programmierfunktionen (genannt Methoden) eng mit der Programmiersprache verwoben, sodaß die beiden (JavaScript+DOM) oft als ein Teil gesehen werden. Trotzdem sind reine JavaScript-Objekte (wie zB. Array, Math oder String) etwas völlig anderes als die DOM-Objekte (wie zB. Element, Node oder Textarea).
DOM-Objekte, Eigenschaften und Methoden
DOM-Objektbaum
document
Anchor
Applet
Area
Form
Button
Checkbox
FileUpload
Hidden
Option
Password
Radio
Reset
Select
Submit
Text
Textarea
event
History
Image
Layer
Link
Media
MimeType
navigator
netscape
Packages
Plugin
screen
Style
window
.addEventListener()
.attachEvent()
Frame
Location
.onload
.onunload
Dazu die nativen JavaScript-Objekte Array, Boolean, Date, Function, java, JavaArray, JavaClass, JavaObject, JavaPackage, Math, Number, Object, RegExp, String, sun.
DOM-Auflistungsfunktionen
document.getElementsByClassName() - Methode, wird mit HTML5 eingeführt.
Element.getElementsByClassName() - Methode, wird mit HTML5 eingeführt.
DOM-Abfragefunktionen
document.activeElement - Liefert das Element zurück, welches den Fokus hat.
Element.className
Element.classList - Eigenschaft, welche ein Objekt mit den Methoden .add(), .has(), .remove() und .toggle() bereitstellt, um die Stylesheetzuordnungen eines Objektes manipulieren zu können. Siehe auch .relList
createHTMLDocument() - Methode, wird mit HTML5 eingeführt.
document.hasFocus - Liefert true, wenn das Dokument/Browserfenster den Fokus hat.
document.head - wird mit HTML5 eingeführt.
Anchor.relList, Area.relList, Link.relList - Eigenschaft, die ein Objekt mit den Methoden .add(), .has(), .remove() und .toggle() bereitstellt, um die Stylesheetzuordnungen eines Objektes manipulieren zu können. Siehe auch .classList
DOM-Objektmanipulation
DOM-Textmanipulation
document.getSelection() - Retourniert ein Objekt, welches die aktuelle Markierung darstellt.
document.innerHTML - Zuerst wurde von IE, dann auch von Opera die Element.innerHTML-Eigenschaft (lesend/schreibend) unterstützt und mit HTML5 auch für das ganze document-Objekt in den Standard aufgenommen. Man sollte jedoch weiterhin von der Verwendung absehen, da Berichten zufolge die Stabilität des Browsers leiden kann, wenn in einer dynamischen Seite sehr viele Ersetzungen mit .innerHTML durchgeführt werden.
DOM-Ereignisse
window.onredo - wird mit HTML5 eingeführt.
window.onundo - wird mit HTML5 eingeführt.
Media.startTime - wird mit HTML5 eingeführt.
Tips & Tricks
<BLINK>-Tag in Internet Explorer emulieren
aus Artikel: wisehack.blogspot.com/2005/04 von Brian
<!--[if IE]>
<style> BLINK { visibility: expression(((new Date().getTime()/325)%3>1)?'':'hidden'); } </style>
<script> window.setInterval(function (){document.recalc();},325); </script>
<![endif]-->
HTML-Elementobjekte um Methoden/Eigenschaften erweitern
aus Artikel: forum.de.selfhtml.org/archiv/2010/2 von molily
»» Allerdings kannst du dir von denen keinerlei zusätzliche Funktionalität erwarten. Setzen/Abfragen ist aber problemlos möglich.
Es gibt Getter und Setter in allen Browsern. Im IE mit ECMAScript-5-konformer Syntax, in den restlichen mit einer proprietären (defineGetter und defineSetter).
»» Allerdings kann es der IE bei HTML-Elementobjekten m.W. immer noch nicht.
IE kann es ab Version 8 Beta 2 von August 2008.
http://msdn.microsoft.com/es-es/library/dd282900(VS.85).aspx
http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
http://msdn.microsoft.com/en-us/library/dd347057(VS.85).aspx
http://msdn.microsoft.com/en-us/ie/dd578303.aspx
Browserübergreifendes Beispiel:
<div id="foo">Some text</div>
<script>
(function (global) {
function extendElement (property, getter, setter) {
var prototype = (global.HTMLElement || global.Element).prototype;
if (Object.defineProperty) {
Object.defineProperty(prototype, property, { get : getter, set : setter });
} else if (prototype.__defineGetter__ && prototype.__defineSetter__) {
prototype.__defineGetter__(property, getter);
prototype.__defineSetter__(property, setter);
} else {
throw "Getter and setter not supported";
}
}
extendElement("mllyRed", function () {
return (this.currentStyle || global.getComputedStyle(this, null)).color;
}, function (value) {
this.style.color = value;
});
var zeFoo = global.document.getElementById("foo");
alert(zeFoo.mllyRed);
zeFoo.mllyRed = "blue";
})(window);
</script>
Funktioniert in allen aktuellen Browsern (Firefox 3.6, Safari 4, IE 8, Chrome 4, Opera 10.10)