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.

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