> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Das DOM

Die Abkürzung DOM steht für **Document Object Model**, die strukturierte Darstellung von HTML-Dokumenten. Es ermöglicht JavaScript den Zugriff auf HTML-Elemente und Stile, um sie zu manipulieren.

Wir können zum Beispiel Text, HTML-Attribute und sogar CSS-Stile ändern. Es ist im Grunde ein Verbindungspunkt zwischen HTML-Dokumenten und JavaScript-Code.

Das DOM wird automatisch vom Browser erzeugt, sobald die HTML-Seite geladen wird, und ist in einer Baumstruktur gespeichert:

<Frame caption="Das DOM">
  <img src="https://mintcdn.com/levexis-38849a2b/fK05ZPeHGTgSfJjo/images/content/web/image-18.png?fit=max&auto=format&n=fK05ZPeHGTgSfJjo&q=85&s=84a6ee917ccb03cb7d231364828e1e53" alt="Das DOM" width="893" height="440" data-path="images/content/web/image-18.png" />
</Frame>

Das DOM sieht ein bisschen aus wie ein Stammbaum. Deshalb verwenden wir ständig die Begriffe Kind-Element, Eltern-Element, Geschwister-Element usw., wenn wir über das DOM sprechen.

Das DOM beginnt immer mit dem `document`-Objekt ganz oben. Das `document`-Objekt ist ein spezielles Objekt, auf das wir in JavaScript Zugriff haben. Dieses Objekt dient als Einstiegspunkt in das DOM. Das `document`-Objekt hat viele Methoden, um die Knoten des DOM auszuwählen.

***

Das DOM ist also das Interface zwischen unserem JavaScript Code und dem Browser bzw. den Elementen darin.

* Erlaubt uns, dass JavaScript mit dem Browser interagieren kann
* Wir können JavaScript schreiben um:
  * HTML-Elemente zu erstellen, zu bearbeiten und zu löschen
  * Styles, Klassen und Attribute zu setzen
  * Events abzuwarten und darauf zu reagieren
* Der DOM-Tree wird von einem HTML-Dokument erstellt, mit welchem wir interagieren können
* DOM ist eine extrem komplexe API, welche viele Methoden und Eigenschaften beinhaltet, um mit dem DOM-Tree zu interagieren

## Die DOM-API

<Frame caption="DOM-API">
  <img src="https://mintcdn.com/levexis-38849a2b/fK05ZPeHGTgSfJjo/images/content/web/image-19.png?fit=max&auto=format&n=fK05ZPeHGTgSfJjo&q=85&s=be8037639c097dc0dba337c734613900" alt="DOM-API" width="1280" height="632" data-path="images/content/web/image-19.png" />
</Frame>

### `Node`

Jeder Node im DOM-Tree ist vom Typ `Node` und beinhaltet unteranderem folgende Properties und Methoden:

* `textContent`
* `childNodes`
* `parentNode`
* `cloneNode()`
* ...

Der `Node`-Typ hat einige Child-Typen sozusagen: `Element`, `Text`, `Comment` und `Document`.

### **`Element`**

Der Typ `Element` hat jedes HTML-Element auf unserer Seite, so z.B. das `<p></p>`-Tag oder `<form></form>`.

Dieser Typ hat Zugriff auf extrem viele praktische Properties und Methoden:

* `innerHTML`
* `classList`
* `children`
* `parentElement`
* `append()`
* `remove()`
* `insertAdjacentHTML()`
* `querySelector()`
* `closest()`
* `matches()`
* `scrollIntoView()`
* `setAttribute()`
* ...

Der `Element`-Typ hat intern noch ein `HTMLElement` mit noch weiteren Elementen, wie z.B. `HTMLButtonElement` oder `HTMLDivElement`

### **`Text`**

Den Text-Typ gibt es immer, wenn es Text auf der Seite hat, z.B. `<p>Paragraph</p>` wobei aber nur der Text selber und nicht das Element, also hier `<p>` zählt.

### **`Comment`**

Auch Kommentare von unserem HTML-Dokument werden als Node dargestellt, als `Comment`: `<!--Comment-->`

### **`Document`**

Der Typ `Document` ist ein sehr wichtiger Typ der unteranderem folgende Methoden enthält:

* `querySelector()`
* `createElement()`
* `getElementById()`
* ...

### `EventTarget`

Weiter über dem Typ `Node` steht der Typ `EventTarget` mit den Methoden `addEventListener()` und `removeEventListener()`.

<Info>
  Alle Methoden und Properties werden vererbt, so hat z.B. ein `HTMLFormElement` Zugriff auf die Methode `cloneNode()` vom Typ `Node`.
</Info>