JavaScript Schnellstart: DOM

Was ist das DOM?

Die Abkürzung DOM steht für Document Object Model und bedeutet, dass JavaScript Zugriff auf alle Elemente des jeweiligen HTML-Dokumentes (z.B. index.html) hat. DOM ist also eine Schnittstelle.

Mit den Funktionen des DOM können wir Elemente in einem HTML-Dokument erstellen, verändern und auch löschen. Das funktioniert in jedem modernen Browser.

Wir können uns ein HTML-Element mit der Eigenschaft id holen.

So sieht der HTML-Code mit der id="knopf" aus:

<a class="btn btn-primary“ id="knopf">Klick mich!</a>

In JavaScript können wir dieses Element holen:

var element = document.getElementById("knopf");

Wir können dadurch den Text des Elementes ändern, auf das Eltern-Element zugreifen oder das Element löschen.

Code-Beispiel: Text ändern

element.innerHtml = "Alles wird gut!";

Wir wollen beim Klick auf das Element ein Bild darunter hinzufügen. Dafür erstellen wir eine Funktion und packen sie als Callback in eine addEventListener-Methode rein.

element.addEventListener("click", angeklickt);

Die Funktion soll im Anschluss einen alert ausgeben:

function angeklickt() {
  alert("Hallo auf lerneProgrammieren.de!");
}

Damit hast du einen Einblick bekommen, wie du DOM benutzen kannst.

In der Übung vertiefen wir dein neues Wissen: