JavaScript: Das DOM: Elemente finden und ändern

Kurz: Der Browser macht aus deiner HTML-Seite einen Baum aus Objekten, das DOM (Document Object Model). JavaScript kann diesen Baum lesen und verändern: Texte tauschen, Elemente hinzufügen, Stile setzen.

Teil des Kurses JavaScript

Kapitel 28 von 40 im Kurs JavaScript (Abschnitt „Im Browser“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Der Browser macht aus deiner HTML-Seite einen Baum aus Objekten, das DOM (Document Object Model). JavaScript kann diesen Baum lesen und verändern: Texte tauschen, Elemente hinzufügen, Stile setzen.

document
 └─ html
     ├─ head
     └─ body
         ├─ h1  "Titel"
         └─ ul
             ├─ li  "Eins"
             └─ li  "Zwei"

Elemente finden

const titel = document.getElementById("titel");               // nach id
const erster = document.querySelector(".karte");              // erstes passendes Element (CSS-Selektor)
const alle = document.querySelectorAll("ul li");              // alle (NodeList)
const bilder = document.getElementsByTagName("img");          // nach Tag

Mit querySelector und querySelectorAll nutzt du dieselben CSS-Selektoren wie im Stylesheet (#id, .klasse, tag, a[href^="https"], ul > li:first-child).

Texte und Inhalte ändern

dom1.html

<h1 id="titel">Alter Titel</h1>
<p class="info">Erster Absatz</p>
<p class="info">Zweiter Absatz</p>
<script>
  const titel = document.getElementById("titel");
  titel.textContent = "Neuer Titel";
 
  document.querySelectorAll(".info").forEach((p, i) => {
    p.textContent += ` (Nr. ${i + 1})`;
  });
 
  console.log(titel.textContent);
</script>

Eigenschaft	Wirkung
textContent	reiner Text (sicher)
innerHTML	HTML als Text lesen/setzen (Vorsicht, siehe unten)
value	Wert eines Eingabefelds
id, className, href, src	HTML-Attribute als Eigenschaften

Achtung

Setze nie ungeprüfte Nutzereingaben mit innerHTML ein. Sonst kann jemand Skripte einschleusen (XSS). Für Text immer textContent.

Elemente erzeugen und einfügen

dom2.html

<ul id="liste"><li>Eins</li></ul>
<button id="knopf">Hinzufügen</button>
<script>
  const liste = document.getElementById("liste");
  let n = 1;
  document.getElementById("knopf").addEventListener("click", () => {
    n++;
    const li = document.createElement("li");
    li.textContent = "Eintrag " + n;
    liste.append(li);                      // hinten anhängen
  });
</script>

Methode	Wirkung
document.createElement("div")	neues Element erzeugen
parent.append(x), prepend(x)	hinten/vorn einfügen
el.before(x), el.after(x)	vor/nach dem Element
el.remove()	Element entfernen
el.replaceWith(x)	ersetzen
el.cloneNode(true)	tiefe Kopie
el.insertAdjacentHTML(pos, html)	HTML an Position einfügen

Navigieren im Baum

dom3.html

<ul id="menue"><li>A</li><li class="aktiv">B</li><li>C</li></ul>
<script>
  const b = document.querySelector(".aktiv");
  console.log(b.previousElementSibling.textContent);   // A
  console.log(b.nextElementSibling.textContent);       // C
  console.log(b.parentElement.id);                     // menue
  console.log(b.parentElement.children.length);        // 3
  console.log(b.closest("ul") === document.getElementById("menue"));
</script>

Eigenschaften im Überblick

• el.children, el.firstElementChild, el.lastElementChild
• el.parentElement, el.closest(selektor) (nächster passender Vorfahr)
• el.matches(selektor) prüft, ob ein Element zu einem Selektor passt
• el.getBoundingClientRect() liefert Position und Größe

Stile und Klassen

dom4.html

<style>
  .rot { color: crimson; font-weight: bold; }
  .box { padding: 12px; border: 2px solid #888; margin: 6px; }
</style>
<div class="box" id="b">Klick mich</div>
<script>
  const b = document.getElementById("b");
  b.addEventListener("click", () => {
    b.classList.toggle("rot");            // Klasse an/aus
    b.style.backgroundColor = b.classList.contains("rot") ? "#fee" : "";
  });
</script>

• classList.add/remove/toggle/contains/replace ist der beste Weg, Aussehen zu ändern
• el.style.eigenschaft setzt einzelne Inline-Stile (camelCase: backgroundColor)
• Mit getComputedStyle(el) liest du die berechneten Werte

Attribute und data-*

dom5.html

<button id="b" data-produkt-id="42" data-preis="9.99">Kaufen</button>
<script>
  const b = document.getElementById("b");
  console.log(b.dataset.produktId, b.dataset.preis);   // data-* -> dataset (camelCase)
  b.setAttribute("title", "Jetzt kaufen");
  console.log(b.getAttribute("title"), b.hasAttribute("disabled"));
  b.toggleAttribute("disabled");
  console.log(b.disabled);
</script>

Wann läuft mein Skript?

Ein Skript kann nur auf Elemente zugreifen, die schon existieren. Setze <script> ans Ende von <body>, nutze defer (<script src="app.js" defer>) oder warte auf das Ereignis:

document.addEventListener("DOMContentLoaded", () => {
  // DOM ist bereit
});

Merke

• Das DOM ist der Objektbaum der Seite
• querySelector(All) findet Elemente mit CSS-Selektoren
• textContent für Text (sicher), innerHTML nur mit vertrauenswürdigem HTML
• createElement, append, remove bauen die Seite um
• classList und dataset für Klassen und data-*-Attribute

Übungsaufgabe

Baue eine Seite mit einer leeren Liste und einem Eingabefeld. Ein Klick auf einen Button hängt den eingegebenen Text als neuen Listeneintrag an.

Quiz zur Selbstkontrolle

Welche Methode findet das erste Element zu einem CSS-Selektor?

• document.querySelector() (richtig)
• document.find()
• document.get()
• document.select()

Welche Eigenschaft setzt Text sicher?

• textContent (richtig)
• innerHTML
• outerHTML
• html

Wie änderst du Klassen am besten?

• element.classList.add / remove / toggle (richtig)
• element.class = ”…”
• element.setClass()
• element.style.class

Weiter im Kurs

Zurück: Timer und die Event Loop

Weiter: Ereignisse (Events)

Alle Kapitel: JavaScript im Überblick