		php.de > PHP.de Wiki
Document Object Model

Persönliche Werkzeuge

Artikel

Suche

Werkzeuge

Ansichten

Document Object Model

Aus PHP.de Wiki

(Weitergeleitet von DOM)

Wechseln zu:Navigation, Suche

Das Document Object Model (DOM) bildet alle Strukturknoten eines Dokuments in einer Baumstruktur ab, um eine weitere elektronische Verarbeitung des Dokuments und dessen Daten zu gewährleisten. In aller Regel handelt es sich hierbei um ein (X)HTML- oder XML-Dokument.

Elementknoten

Im Folgenden soll ein HTML-Dokument den Aufbau eines DOM-Baumes verdeutlichen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Meine Seite</title>
    </head>
    <body>
        <div>
            <p>Ein kleiner Beispieltext.</p>
        </div>
    </body>
</html>

Diese verschachtelte Dokumentenstruktur lässt sich in einem DOM-Baum abbilden:

#document
- html
  - head
    - title
      - #text
  - body
    - div
      - p
        #text

Man sieht: jedes Element wird seiner Verschachtelung nach in den DOM-Baum eingegliedert. Der oberste Knoten ist der Dokumentenknoten. Ihn gibt es nur ein einziges Mal. Untergeordnet folgen die einzelnen Elemente. Der Text innerhalb eines Elements wird als #text-Knoten (#text-Node) behandelt.

Information:
Gecko-Browser interpretieren die Leerzeichen und Zeilenumbrüche zwischen den Elementen ebenfalls als #text-Knoten, weshalb es oft zu unerwarteten Skript-Fehlern kommt. Dieses Verhalten ist laut W3C-Standard allerdings nicht korrekt. Eine mögliche Lösung dieses Problems gibt es im Mozilla Developer Center.

Attributknoten

Nicht nur Elemente stellen Knoten im DOM-Baum dar, auch Attribute tun dies.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Meine Seite</title>
    </head>
    <body>
        <div id="wrapper">
            <p class="big-paragraph">Ein kleiner Beispieltext.</p>
        </div>
    </body>
</html>

Der DOM-Baum sieht diesmal so aus:

#document
- html
  - head
    - title
      - #text
  - body
    - div wrapper
      - p big-paragraph
        #text

Verarbeitung des DOM-Baumes

Der Zweck des Document Object Models ist die maschinelle Verarbeitung des dargestellten Dokuments. Deshalb bieten viele Programmiersprachen (nativ oder als Erweiterung) Methoden zur Verarbeitung der im DOM gespeicherten Daten. Im Beispiel dient JavaScript als Verarbeitungssprache, welches ausgezeichnete Methoden zur DOM-Verarbeitung bietet.

Zunächst wird das <div>-Element anhand seiner ID selektiert. Hierzu dient die Methode getElementById().

var div = document.getElementById('wrapper');

Das Objekt document stellt dabei den #document-Knoten dar. Unterhalb dieses Knotens wird dann ein bestimmtes Element anhand seiner id identifiziert und selektiert. Die Variable div enthält nun eine Referenz auf das <div>-Element.

Jetzt wird das erste Kindelement, also das erste Element unterhalb von <div>, selektiert. Um dies zu bewerkstelligen, wird auf das Array childNodes zurückgegriffen, welches alle direkten Nachfahren von <div> referenziert. Alternativ kann man auch die Eigenschaft firstChild benutzen, welche aus Bequemlichkeitsgründen ebenfalls zur Verfügung steht.

var div = document.getElementById('wrapper');
var p   = div.childNodes[0];
 
// alternativ:
// p = div.firstChild;

Von diesem Element soll nun das Attribut class sowie dessen Kindelement abgefragt werden. Um Attribute zu erfragen dient die Methode getAttribute() (analog setzt setAttribute() einen Attributknoten).

var div = document.getElementById('wrapper');
var p   = div.childNodes[0];
 
var classAtt = p.getAttribute('class');
var txt      = p.childNodes[0];

classAtt bekommt in diesem Skript den Wert des Attributs class des <p>-Elements zugewiesen (big-paragraph) und txt enthält den Textknoten, der Kind von <p> ist. Sein Inhalt kann mit der Eigenschaft nodeValue abgefragt werden:

var div = document.getElementById('wrapper');
var p   = div.childNodes[0];
 
var classAtt = p.getAttribute('class');
var txt      = p.childNodes[0];
var txtValue = txt.nodeValue;

Weiterführende Links

Von „http://www.php.de/wiki-php/index.php/Document_Object_Model“

Kategorie: Begriffserklärungen

Alle Zeitangaben in WEZ +2. Es ist jetzt 02:21 Uhr.