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)