W3docs
de
Anmelden

JavaScript und das DOM

Lerne, wie du mit JavaScript das Document Object Model (DOM) abfragst, änderst und manipulierst: Elemente auswählen, Inhalte und Styles anpassen, Events behandeln.

Info

Wir haben einen eigenen vollständigen Abschnitt über das JavaScript DOM. Du kannst ihn für detaillierte Beispiele und Erklärungen erkunden.

Einführung in JavaScript und das DOM

JavaScript ist die Skriptsprache, die Webseiten zum Leben erweckt. Das Document Object Model (DOM) ist die Brücke, die dies ermöglicht: Wenn ein Browser ein HTML-Dokument lädt, parst er das Markup in einen lebendigen, im Arbeitsspeicher gehaltenen Objektbaum. JavaScript liest und schreibt diesen Baum, und der Browser zeichnet die Seite sofort neu. So wird aus einem statischen Dokument eine interaktive Seite — Schaltflächen reagieren, Inhalte aktualisieren sich und Styles ändern sich, ohne dass die Seite neu geladen wird.

Diese Seite behandelt das Wesentliche: wie das DOM aufgebaut ist, wie man Elemente auswählt, wie man deren Inhalt und Styles ändert und wie man auf Benutzer-Events reagiert. Jedes Thema verweist auf ein ausführlicheres Kapitel, wenn du mehr Details möchtest.

Das DOM verstehen

Das DOM ist eine strukturierte, baumartige Darstellung deines HTML-Dokuments. Jedes Tag, jedes Attribut und jedes Textstück wird zu einem Knoten — einem object, das JavaScript lesen und ändern kann. Da der Baum lebendig ist, bewirkt die Änderung eines Knotens sofortige Änderungen für den Benutzer.

Es hilft, drei Begriffe zu unterscheiden, die leicht verwechselt werden:

  • DOM — das object-Modell, das der Browser aus deinem HTML aufbaut. Es ist nicht der HTML-Quellcode; es ist die geparste, normalisierte Version des Browsers.
  • document — das globale object, das der Einstiegspunkt in den DOM-Baum ist. Jede Auswahl beginnt hier (oder von einem anderen Element aus).
  • Node — ein einzelner Punkt im Baum. Elemente (<div>, <p>), Text und Kommentare sind alles Knoten; Element-Knoten sind diejenigen, mit denen du üblicherweise arbeitest.

Eine ausführlichere Behandlung von Knotentypen und der Baumstruktur findest du unter Understanding the DOM nodes und Traversing the DOM.

Den DOM-Baum navigieren

JavaScript bietet mehrere Methoden, um Elemente im Baum zu finden und mit ihnen zu interagieren.

Ein DOM-Baum, der zeigt, wie das html-Element in head- und body-Knoten verzweigt

Der Baum unten hat einen document-Wurzelknoten, ein <html>-Element mit <head>- und <body>-Kindelementen sowie Textknoten innerhalb der Überschriften und Absätze:

<!DOCTYPE html>
<html>
  <head>
    <title>Text</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
Probier es selbst »

Wichtige Auswahlmethoden

  • document.getElementById() — gibt das einzelne Element mit dieser id zurück, oder null, wenn keines existiert.
  • document.getElementsByClassName() — gibt eine lebendige HTMLCollection von Elementen mit der Klasse zurück.
  • document.getElementsByTagName() — gibt eine lebendige HTMLCollection von Elementen mit dem Tag zurück.
  • document.querySelector() — gibt das erste Element zurück, das einem beliebigen CSS-Selektor entspricht, oder null.
  • document.querySelectorAll() — gibt eine statische NodeList aller übereinstimmenden Elemente zurück.

Welche solltest du verwenden? In modernem Code decken querySelector und querySelectorAll fast jeden Fall ab, da sie die vollständige CSS-Selektor-Syntax akzeptieren (#id, .class, div > p, [type="text"]). Greife nur dann auf getElementById zurück, wenn du die schnellstmögliche Suche nach einer bekannten id benötigst.

Zwei Unterschiede sind in der Praxis wichtig:

  • Lebendig vs. statisch. Eine lebendige HTMLCollection (von getElementsBy*) aktualisiert sich automatisch, wenn sich das DOM ändert; eine statische NodeList (von querySelectorAll) ist eine Momentaufnahme zum Zeitpunkt des Aufrufs.
  • Iteration. Eine NodeList unterstützt forEach direkt; eine HTMLCollection nicht, daher konvertiere sie zuerst mit Array.from(collection).

Weitere Informationen findest du unter Selecting DOM elements.

DOM-Elemente manipulieren

Sobald du eine Referenz auf ein Element hast, kannst du dessen Inhalt, Attribute und Erscheinungsbild ändern — und die Seite aktualisiert sich sofort.

Häufige Operationen

  • Inhalt ändern: Verwende element.innerHTML oder element.textContent.
  • Styles ändern: Greife auf die Eigenschaft element.style zu.
  • Elemente erstellen: Verwende document.createElement().
  • Elemente hinzufügen: Verwende parentElement.appendChild(newElement).
  • Elemente entfernen: Verwende parentElement.removeChild(existingElement).
Warnung

innerHTML parst seinen string als HTML, daher öffnet das Einfügen nicht vertrauenswürdiger Eingaben eine XSS-Lücke. Verwende textContent, wenn du reinen Text einfügst — es ist sowohl sicherer als auch schneller.

Siehe DOM manipulation und Working with styles in the DOM für eine ausführlichere Behandlung.

Event-Behandlung in JavaScript

Ein Event ist etwas, das auf der Seite passiert — ein Klick, ein Tastendruck, eine Formularübermittlung oder das Laden der Seite. JavaScript kann einen Listener registrieren, der eine Funktion ausführt, wann immer ein bestimmtes Event auf einem bestimmten Element ausgelöst wird.

Syntax für Event-Listener

element.addEventListener('event', functionToCall);

Das erste Argument ist der Event-Name (ohne das Präfix on — es ist 'click', nicht 'onclick'). Das zweite ist der Handler, die Funktion, die der Browser aufruft, wenn das Event eintritt.

Wichtige Events

  • Click Events: Werden durch Benutzerklicks ausgelöst.
  • Load Events: Werden ausgelöst, wenn Ressourcen geladen wurden.
  • Input Events: Treten auf, wenn Benutzer mit Eingabefeldern interagieren.

Beispiel zur Event-Behandlung

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>
</body>
</html>
Probier es selbst »

Für einen umfassenderen Überblick über das Event-Modell — Bubbling, das Event-object und das Entfernen von Listenern — lies Introduction to browser events und Event handling in the DOM.

Erweiterte DOM-Manipulationen

Über grundlegende Bearbeitungen hinaus unterstützt JavaScript komplexere Operationen wie das Klonen von Knoten, die Behandlung von Formularen und das Umschalten von CSS-Klassen.

Techniken

  • Knoten klonen — element.cloneNode(true) kopiert ein Element und seine Nachfahren (false kopiert nur das Element selbst).
  • Formulare verarbeiten — lese input.value, reagiere auf submit und validiere vor dem Absenden.
  • CSS-Klassen manipulieren — element.classList.add(), .remove() und .toggle() sind sauberer als das Überschreiben von className.

Die classList-API ist die idiomatische Methode zum Ein- und Ausschalten von Styles. Dieses ausführbare Snippet zeigt die Logik, der toggle folgt:

// classList.toggle removes a class if present, adds it if absent.
// Here we model that behaviour with a plain Set to show the result.
const classes = new Set(['box']);

function toggle(name) {
  if (classes.has(name)) {
    classes.delete(name);
  } else {
    classes.add(name);
  }
  return classes.has(name);
}

console.log(toggle('active')); // true  (added)
console.log(toggle('active')); // false (removed)
console.log([...classes]);     // [ 'box' ]

JavaScript und DOM: Best Practices

Um das DOM effizient zu nutzen, beachte Folgendes:

  • DOM-Zugriffe minimieren. Das Lesen und Schreiben des DOM ist weit langsamer als das Arbeiten mit JavaScript-Werten. Speichere Referenzen zwischen und bündele deine Änderungen, anstatt das DOM in einer engen Schleife zu berühren.
  • Event Delegation verwenden. Statt eines Listeners pro Kindelement füge einen einzigen Listener an das Elternelement an und untersuche event.target. Dadurch werden dynamisch hinzugefügte Kinder automatisch behandelt und es wird weniger Arbeitsspeicher verbraucht.
  • Reflow und Repaint verstehen. Ein Reflow berechnet das Layout neu; ein Repaint zeichnet Pixel neu. Beides ist aufwendig, also gruppiere Style-Schreibvorgänge und bevorzuge DocumentFragment für Masseneinfügungen. Siehe DOM performance optimization.

Beispiel für Event Delegation

Anstatt einen Handler an jedes <li> zu binden, binde einen an die Liste und lies, auf welches Element geklickt wurde:

document.getElementById('list').addEventListener('click', function (event) {
  // event.target is the actual element the user clicked.
  if (event.target.tagName === 'LI') {
    console.log('You clicked:', event.target.textContent);
  }
});

JavaScript und DOM: Code-Beispiele

Inhalt ändern

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="content">Original Content</div>
    <script>
        document.getElementById('content').innerHTML = 'Updated Content';
    </script>
</body>
</html>
Probier es selbst »

Neue Elemente hinzufügen

<!DOCTYPE html>
<html>
<head>
    <title>Add Elements</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'New Paragraph';
        document.getElementById('container').appendChild(newElement);
    </script>
</body>
</html>
Probier es selbst »

Denke daran: JavaScript und das DOM zu beherrschen ist eine kontinuierliche Lernreise. Experimentiere weiter, baue Projekte und verfeinere deine Fähigkeiten, um ein versierter JavaScript-Entwickler zu werden.

Übung

Übung
Welche Rolle spielt JavaScript mit dem Document Object Model (DOM)?
Welche Rolle spielt JavaScript mit dem Document Object Model (DOM)?
Was this page helpful?