JavaScript und DOM — die Seite lebendig machen

HTML und CSS beschreiben, wie die Seite aussieht, wenn sie geladen wird. JavaScript ist das, was sie danach reagieren lässt: ein Menü bei einem Klick öffnen, ein Formular validieren, neue Daten holen und den Inhalt aktualisieren, ohne dass die ganze Seite neu geladen werden muss. Der Schlüssel zu all dem ist das DOM.

Wenn der Browser HTML lädt, baut er im Speicher ein Modell der Seite auf, das DOM (Document Object Model) genannt wird. Es ist ein Baum aus Elementen, den JavaScript lesen und ändern kann. Änderst du etwas im DOM, aktualisiert der Browser das, was der Nutzer sieht — so wird eine Seite nach dem Laden lebendig. Du findest Elemente im Baum, liest oder änderst ihren Inhalt und ihre Eigenschaften und fügst Elemente hinzu oder entfernst sie.

Die meiste Interaktion baut auf Ereignissen auf: ein Klick, ein Tastendruck, das Absenden eines Formulars, das fertige Laden der Seite. Man lauscht auf ein Ereignis an einem Element und knüpft eine Funktion daran, die ausgeführt wird, wenn das Ereignis eintritt. So verbindet man die Handlungen des Nutzers mit Code, der etwas tut. Halte diese Funktionen klein und lass sie andere Funktionen aufrufen, damit der Code lesbar bleibt.

Manches dauert Zeit — besonders das Holen von Daten über das Netz. Das darf nicht die ganze Seite einfrieren, während man wartet. Deshalb ist JavaScript asynchron: Man fordert die Daten an und bekommt Bescheid, wenn die Antwort da ist, während der Rest der Seite weiter funktioniert. Wenn die Antwort kommt — typischerweise als JSON von einer API — aktualisiert man das DOM mit dem neuen Inhalt. Das ist die Technik, mit der eine Seite mehr nachladen kann, ohne neu geladen zu werden.

• 01DOM: das Modell der Seite im Browser, das JavaScript verändern kann
• 02Ereignis: etwas, das passiert — Klick, Tastendruck, Absenden — worauf Code reagieren kann
• 03Listener: eine Funktion, die an ein Ereignis auf einem Element gebunden ist
• 04Asynchron: auf eine Antwort warten, ohne den Rest der Seite zu blockieren
• 05JSON: das Textformat, mit dem eine API typischerweise antwortet

Schreibe JavaScript-Code nicht direkt in die HTML-Elemente. Halte den Code in eigenen Dateien zusammen und binde das Verhalten von dort an die Seite. Das hält die drei Zuständigkeiten — Struktur, Aussehen und Verhalten — getrennt, genau wie bei CSS, und macht die Seite viel leichter zu lesen und zu korrigieren.

“JavaScript ohne DOM ist nur eine Rechenaufgabe. Erst die Begegnung mit der Seite macht die Sprache zum Web.”

— Gängige Faustregel in der Frontend-Entwicklung