Das DOM: Elemente finden und ändern

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

Elemente erzeugen und einfügen

Navigieren im Baum

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

• 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-*

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
});