path: root/files/de/gecko-dom-referenz/einführung/index.html

---
title: Einführung
slug: Gecko-DOM-Referenz/Einführung
tags:
  - DOM
translation_of: Web/API/Document_Object_Model/Introduction
---
<p>Diese Sektion bietet eine kurze, konzeptuelle Einführung in das <a href="/en-US/docs/DOM" title="DOM">DOM</a>: was es ist, wie es Struktur für <a href="/en-US/docs/HTML" title="HTML">HTML</a> und <a href="/en-US/docs/XML" title="XML">XML</a> Dokumente bietet, wie man darauf zugreifen kann, und wie diese API die Referenz-Information und Beispiele präsentiert. </p>

<h2 id="What_is_the_DOM" name="What_is_the_DOM">Was ist das DOM?</h2>

<p>Das Document Object Model (DOM) ist eine Programmier-Schnittstelle für HTML und XML Dokumente. Es liefert eine strukturierte Repräsentation von dem Dokument und bietet Möglichkeiten die Struktur von einem Programm anzusprechen, sodass die Dokument-Struktur, Stil und Inhalt von diesem verändert werden kann. Das DOM bietet die Repräsentation des Dokuments als strukturierte Gruppe von Knoten (nodes) und Objekten, welche Eigenschaften und Methoden haben. Essentiell ist, dass es eine Verbindung von Webseiten mit den Skripte oder Programmiersprachen bietet.</p>

<p>Eine Webseite ist ein Dokument. Diese kann entweder im Browser-Fenster angzeigt werden, oder dessen HTML-Quellcode. In beiden Fällen ist es das gleiche Dokument. Das Dokument Objekt Modul (DOM) bietet einen anderen Weg zum Represäntieren, Lagern und Manipulieren von diesem Dokument. Das DOM ist eine vollkommen objekt-orientierte Repräsentation einer Webseite und kann mit Skript-Sprachen wie JavaScript modifiziert werden.</p>

<p>Der <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> Standard formte die Basis für die Implementierung des DOM in den meisten modernen Browsern. Viele Browser bieten Erweiterung außerhalb vom W3C-Standard an, sodass Obacht beim Benutzen dieser im Web geboten werden sollte, da Dokumente vielleicht von verschiedenen Browsern unterschiedliche DOMs haben.</p>

<p>Als Beispiel definiert das W3D DOM die <code>getElementsByTagName</code> Methode und dessen Ausgabewert als eine Liste aller &lt;p&gt;-Elemente in dem Dokument:</p>

<pre class="brush: js">var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first &lt;p&gt; element
// paragraphs[1] is the second &lt;p&gt; element, etc.
alert(paragraphs[0].nodeName);
</pre>

<p>Alle diese Eigenschaften, Methoden und Events werden als organisierte Objekte vom DOM zur Verfügung gestellt und dienen der Manipulation und dem Erstellen von Webseiten. Als Beispiel: das <code>document</code> Objekt, welches sich selbst repräsentiert, das <code>table</code> Objekt, welches die spezielle <code>HTMLTableElement</code> DOM-Eingabemaske für den Zugriff von HTML-Tabellen bietet, usw). Diese Dokumentation bietet eine von Objekt-zu-Objekt Referenz der DOM implementierten und Gecko-basiertem Browsern (z.B. Firefox).</p>

<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM und JavaScript</h2>

<p>Das kurze Beispiel oberhalb, wie nahezu alle Beispiele in dieser Referenz, ist <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Das heißt es ist in JavaScript <em>geschrieben</em>, aber es <em>nutzt</em> das DOM um Zugriff auf das Dokument und seine Elemente zu erhalten. Das DOM ist keine Programmiersprache, aber ohne dieses würde JavaScript überhaupt kein Model oder Darstellung der Web-Seite, XML-Seite und dessen Elemente haben, um welche es sich normalerweise kümmert. Jedes Element in einem Dokument - das Dokuement als Ganzes, der Kopf, Tabellen innerhalb des Dokuments, Tabellen-Köpfe, Text innerhalb der Tabellen-Zellen - sind Teile des Dokument-Objekt-Moduls für das Dokument. Also können diese alle über das DOM und einer Skriptsprache wie JavaScript angesprochen und manipuliert werden.</p>

<p>Am Anfang war JavaScript und das DOM stark verflochten, aber schließlich haben sich in eigenständiges Dasein entwickelt. Der Seiteninhalt wird im DOM gelagert und kann via JavaScript angesprochen und manipuliert werden, sodass wir diese ungefähre Gleichung schreiben können:</p>

<p>API (web or XML page) = DOM + JS (scripting language)</p>

<p>Das DOM wurde kreiert ohne eine Abhängigkeit von irgendeine spezielle Programmiersprache zu haben, welche die Struktur eines Dokuments repräsentiert und diese als eine einzelne, konsistente API (Programmierschnittstelle) zur Verfügung stellt. Obwohl wir uns in dieser Dokumentation speziell auf JavaScript konzentrieren, können die Inhalte des  DOM von jeder Programmiersprache, wie z.B. Python, genutzt werden - was dieses Beispiel demonstriert:</p>

<pre class="brush: python"># Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
</pre>

<p>Für weitere Informationen darüber, welche Technologien in das Schreiben von JavaScript im Web involviert sind, siehe <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript Technologie Übersicht</a>.</p>

<p> </p>

<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Wie greife ich auf das DOM zu?</h2>

<p>Du brauchst nichts besonderes machen um das DOM zu nutzen. Verschiedene Browser haben unterschiedliche Ausführungen vom DOM, und diese Ausführungen  weisen unterschiedliche Konformitätsgrade des eigentlichen DOM Standards auf - ein Thema, welches wir in dieser Dokumentation vermeiden zu versuchen. Aber jeder Browser benutzt ein Dokument-Objekt-Modl um eine Webseite für Skripte zugänglich zu machen.</p>

<p>Wenn du ein Skript erstellst - ob in-line im &lt;script&gt;-Element oder eingebunden in der Webseite, das bedeutet von einer Anweisung, welches ein Skript lädt, - kannst du die API sofort nutzen um die <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> oder <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> Elemente des Dokuments selbst zu manipulieren oder zu dessen Kind-Elemente zu gelangen, welche eine Vielzahl an Elementen in einer Webseite sind. Deine DOM-Programmierung könnte vielleicht so simpel sein wie das Folgende, welches eine Aufruf-Nachricht (alert message) beim Ausführen der <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> Funktion von dem <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> Objekt ist. Oder du nutzt anspruchsvollere DOM-Methoden um neue Inhalte zu erstellen, wie im folgenden Beispiel unterhalb.</p>

<pre class="brush: html">&lt;body onload="window.alert('welcome to my home page!');"&gt;
</pre>

<p>Neben dem <code>&lt;script&gt;</code> Element, in welchem das JavaScript definiert ist, setzt dieses JavaScript eine Funktion in Gange, wenn das Dokument geladen ist (und wenn das ganze DOM zum Gebrauch erreichbar ist).</p>

<p>Diese Funktion erstellt ein neues H1 Element, fügt Text zum Element, und dann fügt es die H1 in den Baum des Dokuments hinein:</p>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;
       // Diese Funktion ausführen, wenn das Dokument geladen ist.
       window.onload = function() {

       // Erstellen Sie ein paar Elemente in einer ansonsten leeren HTML-Seite
       var heading = document.createElement("h1");
       var heading_text = document.createTextNode("Big Head!");
       heading.appendChild(heading_text);
       document.body.appendChild(heading);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Important_Data_Types" name="Important_Data_Types">Wichtige Daten-Typen</h2>

<p>Diese Dokumenation versucht eine vielzahl an Objekten und Typen so leicht wie möglich zu erklären. Aber es gibt eine Anzahl verschiedener Daten-Typen, welche sich rund um die API behandelt werden - also achte darauf. Einfachheitshalber sind die Syntax-Beispiele in dieser API-Referenz referenzieren typischerweise an <code>nodes</code> (Knoten) als Elemente, an Arrays von nodes als <code>nodeList</code>s (oder einfach <code>element</code>s), und an Attribut-Knoten (<code>attribute</code> nodes)<code>, </code>einfach als <code>attributes.</code></p>

<p>Die folgende Tabelle beschreibt kurz diese Daten-Typen:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>document</code></td>
   <td>
    <p>Wenn ein Mitglied ein Objekt des Typs <code>document</code> wiedergibt (z.B. die <strong><code>ownerDocument</code> </strong>Eigenschaft eines Elements gibt das <code>document </code>wieder, zu welchem es gehört), ist diese Objekt das oberste <code>document</code> Objekt selbst. Das Kapitel <a href="/en-US/docs/DOM/document" title="DOM/document">DOM <code>document</code> Referenz</a>  beschreibt  das <code>document</code> Objekt.</p>
   </td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td>
    <p><code>element</code> gehört zu einem Element oder einer <code>node</code> des Typs <code>element,</code> wiedergegeben von einem Mitglied der DOM API. Anstatt zu sagen, dass die <code>document.createElement()</code> Methode ein Objekt wiedergibt, welches zu einer <code>node</code> referenziert wird, sagen wir dass die Methode ein <code>element</code> wiedergibt, dass gerade in dem DOM erstellt wurde. E<code>lement</code> Objekte implementieren das DOM Element-Interface und ebenso das einfachere Node-Interface, welche diese Referenz beide beinhaltet.</p>
   </td>
  </tr>
  <tr>
   <td><code>nodeList</code></td>
   <td>
    <p>Eine <code>nodeList</code> ist eine Ansammlung von Elementen, ähnlich wie diese von der Methode <code>document.getElementsByTagName()</code> zurückgegeben werden. Inhalte in einer <code>nodeList</code> werden könne auf zwei Wegen anhand des Indexes angesprochen werden. Diese beiden sind gleichwertig:</p>

    <ul>
     <li>list.item(1)</li>
     <li>list[1]</li>
    </ul>

    <p>Im Ersten <strong><code>item()</code></strong> ist die einzelne Methode auf das <code>nodeList</code> Objekt. Das Zeichen nutzt die typische Array-Syntax um den zweiten Inhalt in der Liste abzuholen.</p>
   </td>
  </tr>
  <tr>
   <td><code>attribute</code></td>
   <td>When an <code>attribute</code> is returned by a member (e.g., by the <strong><code>createAttribute()</code></strong> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td>
  </tr>
  <tr>
   <td><code>namedNodeMap</code></td>
   <td>
    <p>Eine <code>namedNodeMap</code> ist wie ein Array. Aber die Inhalte werden beim Namen oder Index angesprochen. Obwohl dieser letztere Fall nur eine Bequemlichkeit für die Aufzählung ist, da sie in keiner bestimmten Reihenfolge in der Liste sind. Eine <code>namedNodeMap</code> hat eine <code>item() </code>Methode für diesen Fall - du kannst ebenfalls Inhalte zu einer <code>namedNodeMap</code> hinzufügen oder entfernen.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="DOM_interfaces" name="DOM_interfaces">DOM Schnittstellen</h2>

<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. It's often a matter of indifference that the object representing the <code>HTML FORM</code> element gets its <strong><code>name</code></strong> property from the <code>HTMLFormElement</code> interface but its <strong><code>className</code></strong> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in the form object.</p>

<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p>

<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Schnittstellen und Objekte</h3>

<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized <a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/table">HTML Table Element Interface</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="/en-US/docs/DOM/element" title="DOM/element">DOM <code>element</code> Reference</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p>

<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p>

<pre class="brush: js">var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for (var i = 0; i &lt; tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
</pre>

<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interne Schnittstellen des DOM</h3>

<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.</p>

<p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p>

<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p>

<ul>
 <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li>
 <li><code>element.<a href="/en-US/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li>
 <li><code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li>
 <li><code>parentNode.<a href="/en-US/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a></code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a></code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a></code></li>
</ul>

<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Das DOM API testen</h2>

<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code>&lt;script&gt;</code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p>

<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code>&lt;script&gt;</code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p>

<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;DOM Tests&lt;/title&gt;
    &lt;script type="application/javascript"&gt;
    function setBodyAttr(attr,value){
      if (document.body) eval('document.body.'+attr+'="'+value+'"');
      else notSupported();
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="margin: .5in; height: 400;"&gt;
      &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;color&lt;/b&gt;&lt;/p&gt;
      &lt;form&gt;
        &lt;select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="black"&gt;black
          &lt;option value="darkblue"&gt;darkblue
        &lt;/select&gt;
        &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
        &lt;select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="white"&gt;white
          &lt;option value="lightgrey"&gt;gray
        &lt;/select&gt;
        &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
        &lt;select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="blue"&gt;blue
          &lt;option value="green"&gt;green
        &lt;/select&gt;  &lt;small&gt;
        &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
        (sample link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
      &lt;/form&gt;
      &lt;form&gt;
        &lt;input type="button" value="version" onclick="ver()" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p>

<figure>
<figcaption>Bild 0.1 Beispiel DOM Test Seite</figcaption>
<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>

<p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p>

<h2 id="Weitere_Links">Weitere Links</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>