JavaScript & DOM Spickzettel

Dieser Spickzettel zeigt Ihnen, wie Sie JavaScript in Ihre Website integrieren und wie Sie mit dem DOM (Document Object Model) HTML-Elemente auslesen, verändern und auf Klicks reagieren.

1. JavaScript einbinden & Grundlagen

Konzept	Code / Tag	Erklärung
Externe Datei (Standard)	`<script src="script.js"></script>`	Bindet eine externe JS-Datei ein. Wird meistens ganz am Ende vor dem schließenden `</body>` platziert.
Im Head mit "defer" (Modern)	`<script src="script.js" defer></script>`	Wird in den `<head>` geschrieben. Das `defer` sorgt dafür, dass JS erst ausgeführt wird, wenn das komplette HTML geladen ist. Sehr wichtig!
Internes Script	`<script> let x = 5; </script>`	Schreibt JS-Code direkt in die HTML-Datei. Nur für sehr kurze Skripte empfohlen.
Konsolen-Ausgabe	`console.log("Hallo Welt");`	Schreibt eine Nachricht in die Entwicklertools des Browsers (F12). Unverzichtbar für die Fehlersuche!

2. Das DOM (Document Object Model)

Die DOM-Baumstruktur visualisiert

Der Browser wandelt Ihr HTML in einen "Stammbaum" (Tree) aus Knoten (Nodes) um. Jedes Element, jeder Text und jedes Attribut ist ein Knoten.

Document (Das gesamte Dokument)
 └── html (Wurzel-Element / Root)
      ├── head (Child von html)
      │    ├── title
      │    │    └── "Mein Blog" (Text-Knoten)
      │    └── meta
      └── body (Sibling/Geschwister von head)
           ├── h1 (Child von body)
           │    └── "Willkommen!" (Text-Knoten)
           └── div (id="container")
                ├── p
                └── a (href="#")

Wichtige Verwandtschafts-Begriffe

Parent (Elternteil): Das Element, das ein anderes Element direkt umschließt. (z.B. ist <body> der Parent von <h1>).
Child (Kind): Elemente, die direkt innerhalb eines anderen Elements liegen. (z.B. sind <h1> und <div> die Children von <body>).
Sibling (Geschwister): Elemente, die auf der exakt gleichen Ebene liegen und denselben Parent haben. (z.B. sind <head> und <body> Siblings).

Warum ist das wichtig? JavaScript kann nicht nur Elemente direkt suchen, sondern auch im Baum navigieren (z.B. mit element.parentElement oder element.children).

Elemente finden und ändern

Kategorie	JavaScript Code	Erklärung
1. Elemente finden (Select)	`document.getElementById("meinTitel")`	Findet ein einzelnes Element anhand seiner HTML-ID (`id="..."`).
1. Elemente finden (Select)	`document.querySelector(".meineKlasse")`	Findet das erste Element, das auf einen CSS-Selektor passt (Klasse, Tag, ID).
2. Inhalt ändern	`element.textContent = "Neu";`	Ändert den reinen Text eines Elements (sicherer gegen Hackerangriffe).
2. Inhalt ändern	`element.innerHTML = "<b>Fett</b>";`	Ersetzt den kompletten HTML-Inhalt innerhalb des Elements.
3. CSS & Klassen ändern	`element.classList.add("aktiv");`	Fügt dem Element eine CSS-Klasse (z.B. für Styling) hinzu.
	`element.classList.remove("aktiv");`	Entfernt eine CSS-Klasse.
	`element.classList.toggle("aktiv");`	Schaltet die Klasse um: Ist sie da, wird sie entfernt. Fehlt sie, wird sie hinzugefügt (Perfekt für Menüs!).
4. Interaktion (Events)	`element.addEventListener("click", funktion);`	Wartet darauf, dass das Element angeklickt wird, und führt dann eine Funktion aus.

3. Praktische Code-Beispiele

Beispiel 1: Die perfekte Einbindung (in der index.html)

Binden Sie Ihre JS-Datei im Head mit dem Attribut defer ein. So blockiert das Skript nicht den Aufbau der Seite, greift aber sicher auf alle HTML-Elemente zu.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
    <link rel="stylesheet" href="style.css">
    
    <!-- HIER WIRD JAVASCRIPT EINGEBUNDEN -->
    <script src="script.js" defer></script>
</head>
<body>
    <h1 id="ueberschrift">Hallo Welt</h1>
</body>
</html>

Beispiel 2: Text per JavaScript ändern (in der script.js)

Wir suchen ein Element und ändern sofort seinen Text.

// 1. Element im DOM suchen und in einer Variablen speichern
let meinTitel = document.getElementById("ueberschrift");

// 2. Den Inhalt des Elements verändern
meinTitel.textContent = "Hallo JavaScript!";

// 3. Zur Kontrolle etwas in die Entwickler-Konsole schreiben
console.log("Die Überschrift wurde erfolgreich geändert!");

Beispiel 3: Auf einen Button-Klick reagieren (Event Listener)

<!-- HTML-Teil -->
<button id="meinButton">Klick mich</button>
<div id="nachricht"></div>

// JavaScript-Teil
// 1. Elemente auswählen
let btn = document.getElementById("meinButton");
let ausgabe = document.getElementById("nachricht");

// 2. Den "Lauscher" (Event Listener) an den Button hängen
btn.addEventListener("click", function() {
    
    // Dieser Code wird NUR ausgeführt, wenn geklickt wird
    ausgabe.innerHTML = "<strong>Danke für den Klick!</strong>";
    
    // Optional: Fügt dem Ausgabefeld eine Bootstrap CSS-Klasse hinzu
    ausgabe.classList.add("text-success"); 
    
});

✏️ Seite in GitHub bearbeiten