W3docs
de
Anmelden

Das Document Object Model (DOM) verstehen

Das Document Object Model (DOM) ist ein Grundpfeiler der Webentwicklung und verbindet den Inhalt einer Seite (HTML), ihre Darstellung (CSS) und ihr interaktives Verhalten.

Das Document Object Model (DOM) ist ein Grundpfeiler der Webentwicklung und fungiert als Brücke zwischen dem Inhalt einer Seite (HTML), ihrer Darstellung (CSS) und ihrem interaktiven Verhalten (JavaScript). Dieser Artikel beleuchtet die Natur des DOM, seine Beziehung zu HTML und CSS sowie die Art und Weise, wie Browser es aufbauen, um eine Webseite zu rendern.

Was ist das DOM?

Das DOM ist eine Programmierschnittstelle, die von Browsern implementiert wird und es Skripten ermöglicht, den Inhalt, die Struktur und den Stil einer Website dynamisch zu lesen, zu manipulieren und zu verändern. Es stellt eine Webseite als Baum von Objekten dar, wobei jeder Knoten einem Teil des Dokuments entspricht — einem Element, einem Attribut, einem Textstück oder einem Kommentar. Das DOM ist weder Teil der HTML- noch der JavaScript-Spezifikation; es wird vom Browser gemäß der DOM-Spezifikation aufgebaut, die von der WHATWG und dem World Wide Web Consortium (W3C) standardisiert wurde.

Eine hilfreiche Analogie: Die HTML-Datei ist das Rezept, und das DOM ist das fertige Gericht, das der Browser tatsächlich serviert. Nach dem Parsen existiert der HTML-Text nicht mehr — JavaScript spricht immer nur mit dem DOM. Deshalb ändert document.body.innerHTML = '...' die Seite, überschreibt aber niemals die ursprüngliche .html-Datei auf dem Datenträger.

Wie HTML auf einen DOM-Baum abgebildet wird

Betrachten Sie dieses kleine Markup-Beispiel:

<body>
  <h1>Hello</h1>
  <p>A <em>short</em> note.</p>
</body>

Der Browser verwandelt es in einen Baum, in dem jedes Tag zu einem Elementknoten und jeder Textabschnitt zu einem Textknoten wird:

HTMLBodyElement (body)
├── HTMLHeadingElement (h1)
│   └── #text "Hello"
└── HTMLParagraphElement (p)
    ├── #text "A "
    ├── HTMLElement (em)
    │   └── #text "short"
    └── #text " note."

Beachten Sie, dass Leerzeichen und Text zwischen Tags ebenfalls zu echten Knoten werden — eine häufige Überraschung, wenn man erwartet, dass firstChild das <h1> ist, aber stattdessen einen Textknoten erhält. Um zu erfahren, wie der Browser jeden Knotentyp kategorisiert, lesen Sie Understanding the DOM Nodes und Node properties: type, tag, and contents.

Unsere JavaScript-DOM-Abschnitte entdecken

Dieses Kapitel ist der Einstiegspunkt in eine vollständige Serie über die Arbeit mit dem DOM in JavaScript. Jedes Thema unten verlinkt auf ein eigenes Kapitel:

  1. Understanding the DOM Nodes — die grundlegenden Bausteine des DOM und ihre Strukturierung.
  2. Selecting DOM Elements — Methoden zum Auffinden von Elementen, einschließlich getElement* und querySelector.
  3. Manipulating the DOM — Elemente hinzufügen, entfernen und verändern, um dynamische Seiten zu erstellen.
  4. Working with Styles in the DOM — CSS-Stile über JavaScript anwenden und auslesen.
  5. Event Handling in the DOM — effizient auf Benutzerinteraktionen reagieren.
  6. Traversing the DOM — im Baum navigieren, um Eltern-, Kind- und Geschwisterknoten zu erreichen.
  7. DOM Manipulation Techniques — DocumentFragments, Knoten klonen und Aktualisierungen bündeln.
  8. Working with Forms — Eingaben auslesen, Validierung und Übermittlungen verarbeiten.
  9. Advanced DOM Techniques — komplexe Manipulationen und Optimierungen.
  10. DOM Manipulation Libraries — Bibliotheken wie jQuery, die häufige Aufgaben vereinfachen.
  11. DOM Browser Compatibility — Manipulationen browserübergreifend konsistent halten.
  12. DOM Accessibility Considerations — Best Practices für barrierefreie Seiten.
  13. Debugging and Tools — das DOM inspizieren und Fehler beheben.
  14. Performance Optimization — Strategien für schnelle, flüssige Aktualisierungen.
  15. Interactive Elements and Widgets — ansprechende interaktive Komponenten erstellen.

Beziehung zwischen HTML, CSS und dem DOM

HTML, CSS und das DOM arbeiten eng zusammen, um eine Webseite auszuliefern:

  • HTML liefert die Grundstruktur der Seiten, die dann als DOM-Baum dargestellt wird.
  • CSS wird verwendet, um Layout und Erscheinungsbild der Elemente im DOM zu steuern. Der Browser parst Stile in ein CSSOM (CSS Object Model), das mit dem DOM kombiniert wird, um den Rendering-Baum aufzubauen. Wenn sich Stile ändern, berechnet der Browser die berechneten Stile neu und aktualisiert den Rendering-Baum entsprechend, was die Stiländerungen widerspiegelt.
  • JavaScript nutzt das DOM, um mit HTML und CSS zu interagieren und diese zu verändern, was dynamische Änderungen am Inhalt und Stil der Seite ermöglicht.

Der Prozess ist symbiotisch: HTML wird in das DOM umgewandelt, CSS stylt das DOM, und JavaScript manipuliert das DOM, was aktualisiert, was der Benutzer auf dem Bildschirm sieht.

Wie der Browser das DOM aufbaut

Der Prozess des DOM-Aufbaus ist ein wichtiger Teil davon, wie Webbrowser HTML und CSS einer Webseite interpretieren und in eine sichtbare und interaktive Anzeige umwandeln. So läuft dieser Prozess typischerweise ab:

  1. HTML parsen: Der Browser parst den HTML-Quellcode einer Webseite. Während dieses Parsing-Prozesses identifiziert der Browser Elemente wie Tags, Attribute und deren Textinhalt. Jedes Element, Attribut und Textstück wird als Knoten Teil des DOM-Baums.
  2. Den DOM-Baum konstruieren: Während das HTML geparst wird, baut der Browser einen DOM-Baum auf, in dem jeder Knoten ein Objekt im Dokument repräsentiert. Diese Baumstruktur spiegelt die HTML-Struktur wider, erlaubt aber Programmiersprachen wie JavaScript, mit den Elementen der Seite programmatisch zu interagieren.
  3. Rendering-Baum konstruieren: Parallel zum Aufbau des DOM-Baums baut der Browser einen Rendering-Baum auf, der DOM-Elemente mit ihren entsprechenden CSS-Stilen kombiniert. Anders als der DOM-Baum enthält der Rendering-Baum keine nicht-visuellen Elemente wie <script>-Tags oder Elemente mit display: none;.
  4. Layout: Sobald der Rendering-Baum konstruiert ist, berechnet der Browser das Layout und bestimmt die genaue Position und Größe jedes Objekts auf dem Bildschirm.
  5. Painting: Der letzte Schritt umfasst das Zeichnen des Rendering-Baums auf dem Bildschirm. Dieser Schritt übersetzt Knoten im Rendering-Baum in tatsächliche Pixel auf dem Bildschirm und zeigt die Webseite effektiv an.

Praktisches Beispiel: Eine Webseite konstruieren und stylen

Hier ist ein einfaches HTML-Beispiel, das die Interaktion zwischen HTML, CSS und dem DOM demonstriert:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample DOM Page</title>
    <style>
        #container {
            border: 2px solid black;
            padding: 20px;
            margin-top: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a sample paragraph to demonstrate the DOM in action.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heading = document.querySelector('h1');
            heading.style.backgroundColor = 'yellow';
        });
    </script>
</body>
</html>
Probier es selbst »

Erläuterung des Beispiels

  • HTML-Struktur: Dieses HTML-Dokument definiert die Struktur der Seite, einschließlich eines div-Containers, der eine Überschrift und einen Absatz enthält.
  • CSS-Styling: Inline-CSS stylt den Container, die Überschrift und den Absatz und zeigt, wie CSS das Erscheinungsbild von HTML-Elementen beeinflusst.
  • JavaScript-Interaktion: Ein eingebettetes Skript wartet darauf, dass das DOM geladen wird, und ändert dann die Hintergrundfarbe der Überschrift auf Gelb. Diese Interaktion zeigt, wie JavaScript das DOM manipulieren kann, nachdem es vom Browser konstruiert wurde.

Den Baum mit JavaScript auslesen

Man muss keinen Browser haben, um über das DOM als Datenstruktur nachzudenken — es ist lediglich ein Objektgraph. Das folgende Snippet erstellt einen kleinen Baum aus einfachen Objekten, der die DOM-Form (Kinder, Tag-Namen, Text) widerspiegelt, und durchläuft ihn, um die Elementknoten zu zählen — genau wie es querySelectorAll('*').length in einem Browser tun würde:

// A minimal model of a DOM subtree.
const tree = {
  tag: 'body',
  children: [
    { tag: 'h1', children: [{ text: 'Hello' }] },
    {
      tag: 'p',
      children: [
        { text: 'A ' },
        { tag: 'em', children: [{ text: 'short' }] },
        { text: ' note.' },
      ],
    },
  ],
};

function countElements(node) {
  // A node is an "element" when it has a tag; text nodes only have `text`.
  let count = node.tag ? 1 : 0;
  for (const child of node.children ?? []) {
    count += countElements(child);
  }
  return count;
}

console.log(countElements(tree)); // 4

Der Baum enthält vier Elementknoten (body, h1, p, em); die einfachen Zeichenketten sind Textknoten und werden nicht gezählt. Dieser rekursive Abstieg entspricht dem Prinzip hinter echter DOM-Traversierung — siehe Traversing the DOM für die Browser-APIs (childNodes, firstElementChild, parentNode und Verwandte).

Häufige Fallstricke

  • Text und Leerzeichen sind ebenfalls Knoten. element.childNodes enthält Textknoten für die Zeilenumbrüche und Leerzeichen zwischen Tags. Verwenden Sie children oder firstElementChild, wenn Sie nur Elemente möchten.
  • Skripte erst nach dem Vorhandensein des DOM ausführen. Ein <script> im <head> wird ausgeführt, bevor der Body geparst ist, daher gibt document.querySelector('h1') null zurück. Warten Sie auf DOMContentLoaded, platzieren Sie das Skript am Ende von <body>, oder fügen Sie das defer-Attribut hinzu.
  • innerHTML ist nicht kostenlos. Das Zuweisen zu innerHTML parst den String erneut und baut den gesamten Teilbaum neu auf, wobei vorhandene Knoten und ihre Event-Listener verworfen werden. Für kleine Textänderungen bevorzugen Sie textContent; für strukturelle Änderungen erwägen Sie DocumentFragments.
  • Das DOM ist live, der HTML-Quelltext nicht. Das Bearbeiten des DOM ändert niemals die ursprüngliche HTML-Datei, und „Quelltext anzeigen" zeigt die Datei so, wie sie ausgeliefert wurde, nicht das aktuelle DOM. Verwenden Sie das Elements-Panel des Browsers, um den Live-Baum zu inspizieren.
Info

Um Web-Interaktionen zu optimieren, machen Sie sich mit den Knoteneigenschaften des DOM vertraut. Das Verständnis verschiedener Knotentypen, wie Elemente und Text, verbessert Ihre Fähigkeit, effektives, gezieltes JavaScript für die dynamische Manipulation von Webinhalten zu schreiben.

Fazit

Das Verständnis des DOM ist für jeden Webentwickler unerlässlich. Es bietet die Mittel, um den Inhalt, die Struktur und den Stil einer Webseite dynamisch zu erreichenden und zu aktualisieren. Indem Entwickler beherrschen, wie das DOM mit HTML und CSS interagiert, können sie effizientere und dynamischere Webanwendungen erstellen. Dieses grundlegende Wissen ist entscheidend für die Manipulation von Webinhalten und die Erstellung interaktiver und dynamischer Websites.

Übungen

Übung
Welche Rolle spielt JavaScript beim Document Object Model (DOM)?
Welche Rolle spielt JavaScript beim Document Object Model (DOM)?
Was this page helpful?