Begriff
DOM (Document Object Model)
Warum wichtig?
Dieser Begriff ist ein Knoten im SengakujiWorks-Wissensnetz. Nutze Level 0 für die erste Einordnung, Level 1 für Praxis, Level 2 für technische Struktur und Level 3 für Grenzen, Fallstricke und Expertenkontext.
Wenn der Browser dein HTML liest:
<div><h1>Hallo</h1></div>
...baut er daraus im Speicher einen Stammbaum:
div(Vater)h1(Kind)"Hallo"(Text-Kind)
Diesen Baum nennt man DOM.
JavaScript kann diesen Baum verändern.
h1.style.color = "red"
Der Browser malt den Baum dann neu.
Ohne DOM wäre JavaScript blind und könnte nichts auf der Seite ändern.
Merksatz: Eine sprachunabhängige Schnittstelle, die HTML- und XML-Dokumente als Baumstruktur darstellt, auf die Programme (wie JavaScript) zugreifen können, um Inhalt, Struktur und Stil zu ändern.
Das wichtigste Werkzeug:
const elem = document.querySelector('.kopfzeile');
elem.innerHTML = 'Neuer Text';
elem.addEventListener('click', ...);
DevTools: Rechtsklick -> "Untersuchen". Du siehst den DOM-Baum live. Wenn du dort was löschst, verschwindet es sofort auf der Seite.
1. Reflow & Repaint (Performance Killer)
Der DOM ist langsam.
Wenn du div.style.width = "500px" setzt, muss der Browser rechnen:
- Reflow (Layout): Wie breit sind jetzt die Nachbar-Elemente? Verschiebt sich der Text darunter? (Teuer!).
- Repaint: Pixel neu malen.
Wenn du das in einer Schleife 1000x machst, ruckelt die Seite.
Regel: Ändere Klassen (
div.classList.add('wide')) statt Style-Attribute einzeln.
2. Virtual DOM (React)
React fasst den echten DOM nicht direkt an. Es baut eine Kopie im RAM (Virtual DOM). Wenn sich Daten ändern, vergleicht React: "Was ist neu?" (Diffing). "Aha, nur der Text im H1 hat sich geändert." Erst dann macht React eine gezielte Änderung am echten DOM. Das spart teure Reflows und macht React so schnell.
3. Shadow DOM
Web Components.
Du baust ein eigenes Element <mein-video-player>.
Darin sind Buttons und CSS.
Du willst nicht, dass das globale CSS deiner Seite (button { color: red }) die Buttons im Player kaputt macht.
Der Shadow DOM ist ein "gekapselter Sub-Baum". CSS von außen kommt nicht rein. CSS von drinnen kommt nicht raus.
1. Parsing und der Render Tree
Wie exakt wandelt die Browser-Engine (z.B. V8 + Blink) Text in sichtbare Button-Pixel um?
- Ein Tokenizer liest den plain-text String (
<div...) und formt HTML-Nodes. - Daraus entsteht der DOM-Tree (der abstrakte Stammbaum in C++).
- Parallel liest der CSS-Parser die Style-Dateien und baut den CSSOM-Tree (CSS Object Model).
- Diese beiden Bäume crashen ineinander und fusionieren zum Render Tree.
Der Render Tree enthält nur sichtbare Elemente! Ein
<head>oder ein<div style="display: none;">existiert zwar tief im DOM, wird aber rigoros weggeworfen, wenn der finale Render-Baum die Rechenarbeit für das Paint-Painting vorbereitet.
2. Event Bubbling und Event Delegation
Klickst du auf einen Link in einem <ul> Listen-Element in einem <div>, passiert das Event nicht isoliert.
Das Klick-Signal wandert wie ein Stein, der in Wasser fällt, nach außen (Event Bubbling).
Target -> a -> li -> ul -> div -> body -> document.
Anstatt 500 Listener an jede Tabellenzeile im DOM zu pinnen (frisst massiv RAM), macht man Event Delegation: Man hängt nur einen einzigen Listener an die ganze Tabelle (den Vater) und fragt einfach if (event.target.tagName === 'TR'). Dieser Performance-Trick ist für gigantische Dashboards Gold wert.
3. V8 Garbage Collection und Detached DOM Nodes
Einer der fiesesten Memory Leaks. Wenn JavaScript wächst, entfernst du User per Klick:
document.body.removeChild(userDiv). Visuell ist der "User-Card"-Knoten tot.
Aber: Wenn du in einer globalen App-State-Variable (z.B. im React Redux Store) noch eine unscheinbare Referenz auf genau diesen Knoten hältst (deletedCardsArray.push(userDiv)), kann der V8-Garbage-Collector den RAM nicht freigeben.
Der Baum ist "Detached" (Abgetrennt), liegt aber untot wie Blei weiter im RAM. Eine SPA (Single-Page-Application), die stundenlang offen bleibt, crasht am Ende durch out-of-memory.
Quick-Check
BOM (Browser Object Model)?
Nicht verwechseln. BOM istwindow,navigator,location(Dinge, die zum Browser gehören, nicht zum HTML-Inhalt). DOM istdocument.document.write()?Todsünde. Löscht oft die ganze Seite oder blockiert das Laden. NIEMALS nutzen. NutzeappendChild().Ist DOM = HTML?
Nicht ganz. HTML ist der Text in der Datei. DOM ist das Objekt im Speicher. Der Browser kann Fehler im HTML korrigieren (z. B. fehlendes</div>ergänzen), sodass der DOM "sauberer" ist als das HTML.