Was ist das Document Object Model (DOM)?
Das Document Object Model (DOM) ist die in-Memory-Repräsentation des Browsers eines HTML- (oder XML-) Documents, structured als Tree von Nodes. Jedes HTML-Element, Attribut und Stück Text wird ein Node. JavaScript nutzt die DOM-API, um die Struktur zu lesen, zu modifizieren und auf User-Events zu reagieren — so funktionieren dynamic Web-Pages.
Das DOM ist ein W3C-Standard, implementiert von jedem Browser.
Der DOM-Tree
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Welcome</h1>
<p class="intro">Hi there!</p>
</body>
</html>Wird zu einem Tree:
document
└── html
└── body
├── h1#title → "Welcome"
└── p.intro → "Hi there!"Häufige DOM-Operationen
Elements selecten
document.getElementById('title');
document.querySelector('.intro');
document.querySelectorAll('p');Content lesen
const title = document.getElementById('title');
console.log(title.textContent);
console.log(title.innerHTML);Content modifizieren
title.textContent = 'Hello, world';
title.classList.add('highlighted');
title.setAttribute('data-id', '42');Elements createn + inserten
const newP = document.createElement('p');
newP.textContent = 'New paragraph';
document.body.appendChild(newP);Elements entfernen
document.querySelector('.intro').remove();Event-Handling
document.getElementById('btn').addEventListener('click', (event) => {
console.log('Clicked!');
});DOM-Node-Typen
| Typ | Beschreibung |
|---|---|
| Element | HTML-Elements |
| Text | Text-Content in Elements |
| Comment | HTML-Comments |
| Document | Das Root-Document |
| DocumentFragment | Lightweight Container für off-DOM Building |
| Attribute | Element-Attributes |
Performance: DOM-Operations sind expensive
- DOM-Changes batchen.
- DocumentFragment nutzen.
- Read then Write.
- CSS-Transforms für Animation.
- Long Lists virtualisieren.
- Event-Handler debouncen/throttlen.
Virtual DOM (React, Vue) vs Real DOM
Frameworks wie React maintainen ein "Virtual DOM". Bei State-Changes wird das Virtual DOM neu computed, gegen das vorherige diffed und nur minimale Real-DOM-Changes angewandt.
DOM-Events
| Event | Triggered von |
|---|---|
click | Maus-Click |
input / change | Form-Field-Updates |
submit | Form-Submission |
keydown / keyup | Keyboard-Interaction |
scroll | Scrolling |
resize | Window-Resize |
load / DOMContentLoaded | Page-Load |
DOM Best Practices
- DOM-Lookups cachen.
- Event-Delegation nutzen.
- textContent über innerHTML.
- Classes statt Inline-Styles.
- requestAnimationFrame für Visual-Updates.
- Observers disconnecten.
- Forced Synchronous Layout vermeiden.
Häufige DOM-Fallstricke
- innerHTML mit User-Input.
- Layout-Thrashing.
- Memory-Leaks.
- Viele kleine DOM-Updates.
- Auf jedem Child listenen.
- document.write.
- Synchronous DOM in Scroll-Handler.
FAQ: Document Object Model
Ist das DOM dasselbe wie HTML?
Nein. HTML ist Source-Markup. Das DOM ist die in-Memory-Tree-Repräsentation.
Unterschied zwischen DOM und BOM?
DOM = Document-Tree. BOM = Browser-Itself.
Warum ist DOM-Manipulation langsam?
DOM-Changes triggern Reflow + Repaint.
Warum nutzen React/Vue Virtual DOM?
Um expensive Real-DOM-Operations zu minimieren.
Was ist das "Shadow DOM"?
Ein encapsulated DOM-Tree für Web Components.
Wie verhindere ich XSS in DOM-Operations?
textContent statt innerHTML nutzen.
Was ist MutationObserver?
Eine API, um DOM-Changes zu observen.
DOM-heavy App-Performance mit LoadFocus testen
LoadFocus läuft Lighthouse-Audits aus 25+ Regionen. Registrieren bei loadfocus.com/signup.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.