Modul 6: Die Webseite verändern (DOM)

lock
Bevorstehend

HTML-Elemente mit JavaScript live verändern – Texte, Farben und Inhalte

Ziele dieses Moduls
  • Sie können mit document.getElementById HTML-Elemente ansprechen und deren Inhalt und Style verändern
    Anwenden

Was ist der DOM?

Der DOM (Document Object Model) ist die JavaScript-Schnittstelle zum HTML-Dokument. Mit JavaScript kannst du HTML-Elemente live verändern, ohne die Seite neu zu laden.

Element ansprechen und verändern

Schritt 1: Element ĂĽber seine ID holen:

let titel = document.getElementById("mein-titel");

Schritt 2: Verändern:

  • .innerText = "Neuer Text" → Text ersetzen
  • .style.color = "red" → Textfarbe ändern
  • .style.backgroundColor = "yellow" → Hintergrund ändern

Note

Das <script>-Tag steht immer am Ende des <body>, damit alle HTML-Elemente bereits geladen sind, wenn JavaScript ausgefĂĽhrt wird.

Challenge

Aufgabe – DOM

  1. Lade die HTML-Datei herunter und öffne sie in VS Code.
  2. Lass JavaScript den Text im h2 ersetzen.
  3. Ă„ndere die Textfarbe des Absatzes auf eine Farbe deiner Wahl.
  4. Füge dem div «ergebnis-box» einen Hintergrund und einen Text hinzu.
  5. BONUS: Schreibe einen Text mit deinem Namen und Alter in den Absatz «steckbrief». Benutze Variablen!

⬇ aufgabe6.html herunterladen