LU04a – Das DOM (Document Object Model)

Das DOM ist die Art und Weise, wie JavaScript Ihr HTML-Dokument «sieht». Es repräsentiert die gesamte Seite als einen Baum aus Objekten. Jedes HTML-Element wird zu einem Objekt, das Sie lesen und verändern können.

Einfach erklärt: HTML schreiben Sie als Text. Das DOM ist die «lebendige» Version davon – eine Datenstruktur, mit der JavaScript arbeiten kann. Ändern Sie etwas im DOM, sehen Sie es sofort im Browser.

Schauen Sie sich dieses Video auf scrimba.com an, wo das DOM einfach erklärt wird (englisch). DOM Scrimba.com

Jede Verschachtelung in HTML wird im DOM zu einer Eltern-Kind-Beziehung:

document
└── <html>
    ├── <head>
    │   └── <title> "Meine Seite"
    └── <body>
        ├── <header>
        │   └── <nav>
        └── <main>
            └── <section>
                └── <p> "Hallo Welt"

Um ein Element zu verändern, müssen Sie es zuerst «abholen»:

Methode	Beschreibung	Hinweis
`querySelector()`	Erstes Element, das dem CSS-Selektor entspricht	Flexibelste Methode
`querySelectorAll()`	Alle passenden Elemente als NodeList	Für mehrere Elemente mit Schleife
`getElementById()`	Element mit bestimmter ID	Kein `#` im Parameter nötig
`getElementsByClassName()`	Alle Elemente einer Klasse	Kein `.` im Parameter nötig

// Ein einzelnes Element holen
const btn = document.querySelector('#mein-button');
const logo = document.getElementById('logo');
 
// Mehrere Elemente ansprechen
const allePanels = document.querySelectorAll('.panel');
 
// Mit NodeList arbeiten (forEach)
allePanels.forEach(panel => {
  panel.classList.add('hidden');
});

Die sauberste Methode für Style-Änderungen – Sie definieren den Stil im CSS und schalten die Klasse per JS:

const panel = document.querySelector('.panel');
 
panel.classList.add('open');      // Klasse hinzufügen
panel.classList.remove('open');   // Klasse entfernen
panel.classList.toggle('open');   // Umschalten (add ↔ remove)
panel.classList.contains('open'); // true oder false zurückgeben

// Attribut setzen
btn.setAttribute('aria-expanded', 'true');
 
// Attribut lesen
btn.getAttribute('aria-expanded'); // → 'true'

Die eleganteste Methode: den Zustand im CSS definieren und per JS die Klasse togglen.

/* CSS: standardmässig versteckt */
.panel {
  display: none;
}
 
/* CSS: sichtbar wenn Klasse 'open' gesetzt */
.panel.open {
  display: block;
}

// JS: Klasse togglen
const panel = document.querySelector('.panel');
panel.classList.toggle('open'); // ein ↔ aus

LU04a – Das DOM (Document Object Model)

Was ist das DOM?

Der DOM-Baum

Elemente auswählen

Elemente verändern

classList

Attribute setzen und lesen

Elemente ein- und ausblenden

BZZ - Modulwiki