Das DOM manipulieren mit JavaScript

Mit JavaScript kannst du nicht nur rechnen, sondern auch deine Webseite lebendig machen. Das Werkzeug dafür ist das DOM (Document Object Model). Es ist die Brücke zwischen deinem HTML und deinem JavaScript. In diesem Beitrag lernst du, wie du Elemente auswählst, ihren Inhalt veränderst, Styles anpasst und sogar neue Elemente erzeugst.

Was ist das DOM?

Wenn der Browser eine HTML-Seite lädt, baut er daraus eine Baumstruktur aus Objekten. Jedes HTML-Element wird zu einem Knoten in diesem Baum. Über das globale Objekt document greifst du auf diesen Baum zu und kannst ihn verändern. Jede Änderung wird sofort auf der Seite sichtbar.

Elemente auswählen

Bevor du ein Element verändern kannst, musst du es auswählen. Die modernste und flexibelste Methode ist querySelector. Sie nimmt einen CSS-Selektor und gibt das erste passende Element zurück.

// Das Element mit der id "titel"
const titel = document.querySelector("#titel");

// Das erste Element mit der Klasse "box"
const box = document.querySelector(".box");

// Alle Elemente mit der Klasse "box"
const alleBoxen = document.querySelectorAll(".box");

Mit querySelectorAll bekommst du eine Liste aller passenden Elemente, die du durchlaufen kannst.

Inhalte verändern

Hast du ein Element ausgewählt, kannst du seinen Textinhalt mit textContent ändern. Möchtest du HTML einfügen, nutzt du innerHTML.

const titel = document.querySelector("#titel");

// Nur Text setzen
titel.textContent = "Willkommen auf meiner Seite!";

// HTML einfügen
const box = document.querySelector(".box");
box.innerHTML = "<strong>Fett gedruckt</strong>";

Ein Sicherheitshinweis: Setze bei innerHTML niemals ungeprüfte Nutzereingaben ein, das kann zu Sicherheitslücken führen. Für reinen Text ist textContent immer die sichere Wahl.

Styles und Klassen anpassen

Du kannst das Aussehen eines Elements direkt über die style-Eigenschaft steuern. Eleganter ist es jedoch, CSS-Klassen über classList hinzuzufügen oder zu entfernen.

const box = document.querySelector(".box");

// Direkter Style
box.style.backgroundColor = "lightblue";
box.style.padding = "20px";

// Klassen verwalten
box.classList.add("aktiv");
box.classList.remove("versteckt");
box.classList.toggle("markiert"); // an/aus schalten

Die Methode toggle ist besonders praktisch: Sie fügt eine Klasse hinzu, wenn sie fehlt, und entfernt sie, wenn sie schon da ist.

Neue Elemente erstellen

Du kannst nicht nur Vorhandenes ändern, sondern auch komplett neue Elemente erzeugen und in die Seite einfügen. Dafür brauchst du createElement und appendChild.

// Neues Listenelement erstellen
const liste = document.querySelector("#meine-liste");
const eintrag = document.createElement("li");

eintrag.textContent = "Neuer Eintrag";
eintrag.classList.add("listen-item");

// In die Liste einhängen
liste.appendChild(eintrag);

So baust du Inhalte dynamisch auf, zum Beispiel um eine Liste mit Daten aus einer API zu füllen. Genau das ist die Grundlage interaktiver Webseiten.

Fazit

Das DOM ist dein Tor zur sichtbaren Webseite. Du wählst Elemente mit querySelector aus, änderst ihren Inhalt über textContent, passt das Aussehen mit classList an und erzeugst neue Elemente mit createElement. Mit diesen Bausteinen kannst du Seiten dynamisch verändern. Im nächsten Schritt verbindest du das mit Events, um auf Klicks und Eingaben deiner Nutzer zu reagieren.