Das DOM verstehen
Das Document Object Model (DOM) ist eine der wichtigsten Schnittstellen für JavaScript im Browser. Es bildet die Brücke zwischen HTML, CSS und JavaScript und macht es möglich, Webseiten dynamisch zu verändern. In diesem Kapitel lernen Sie die Grundlagen des DOM und warum es für interaktive Webseiten unverzichtbar ist.
Was ist das DOM?
Abschnitt betitelt „Was ist das DOM?“Das DOM ist eine programmierbare Darstellung Ihrer Webseite. Es repräsentiert alle Elemente einer HTML-Seite als strukturierte Objekte, die Sie mit JavaScript manipulieren können.
Stellen Sie sich das DOM wie einen Baum vor:
- Der
documentist die Wurzel des Baums - Jedes HTML-Element ist ein Ast oder Knoten in diesem Baum
- Text und Attribute sind Blätter an diesen Ästen
Directorydocument
Directoryhtml
Directoryhead
- title
- meta
Directorybody
Directoryheader
- h1
Directorymain
- p
Directoryul
- li
- li
- li
Directoryfooter
- nav
Der DOM-Baum
Abschnitt betitelt „Der DOM-Baum“Wenn der Browser eine HTML-Seite lädt, erstellt er automatisch den DOM-Baum aus den HTML-Elementen. Jedes Element wird zu einem JavaScript-Objekt mit Eigenschaften und Methoden.
Hier ist ein einfaches HTML-Beispiel:
<!DOCTYPE html><html> <head> <title>Meine Seite</title> </head> <body> <h1 id="überschrift">Willkommen</h1> <p>Dies ist ein <span class="highlight">wichtiger</span> Absatz.</p> </body></html>Der entsprechende DOM-Baum dazu sieht so aus:
Directorydocument
Directoryhtml
Directoryhead
Directorytitle
- “Meine Seite” (Text)
- meta
Directorybody
Directoryheader
Directoryh1
- “Willkommen” (Text)
Directorymain
Directoryp
- “Dies ist ein ” (Text)
Directoryspan.highlight
- “wichtiger” (Text)
- ” Absatz.” (Text)
Das document-Objekt
Abschnitt betitelt „Das document-Objekt“Das document-Objekt ist der Einstiegspunkt für den Zugriff auf das DOM. Es repräsentiert die gesamte Webseite und bietet viele Methoden, um auf Elemente zuzugreifen.
Einige wichtige Eigenschaften und Methoden des document-Objekts:
// Zugriff auf wichtige Teile der Seitedocument.head; // Der head-Bereich der Seitedocument.body; // Der body-Bereich der Seitedocument.title; // Der Titel der Seitedocument.URL; // Die URL der Seite
// Methoden zum Finden von Elementen (mehr dazu im nächsten Kapitel)document.getElementById("id");document.getElementsByClassName("klasse");document.getElementsByTagName("tag");document.querySelector("css-selector");document.querySelectorAll("css-selector");DOM-Knoten und ihre Typen
Abschnitt betitelt „DOM-Knoten und ihre Typen“Im DOM gibt es verschiedene Arten von Knoten:
- Element-Knoten: Repräsentieren HTML-Elemente (z.B.
<div>,<p>,<h1>) - Text-Knoten: Enthalten den Text innerhalb eines Elements
- Attribut-Knoten: Stellen Attribute von Elementen dar
- Kommentar-Knoten: Repräsentieren HTML-Kommentare
- Dokument-Knoten: Repräsentiert das gesamte Dokument (das document-Objekt)
Navigieren im DOM-Baum
Abschnitt betitelt „Navigieren im DOM-Baum“Sie können durch den DOM-Baum navigieren, indem Sie die Beziehungen zwischen den Knoten nutzen:
Elternknoten
Abschnitt betitelt „Elternknoten“element.parentNode; // Der Elternknotenelement.parentElement; // Der Elternknoten (nur Elemente)Kindknoten
Abschnitt betitelt „Kindknoten“element.childNodes; // Alle Kindknoten (inkl. Text, Kommentare)element.children; // Nur Element-Kinderelement.firstChild; // Erstes Kind (kann ein Text-Knoten sein)element.firstElementChild; // Erstes Element-Kindelement.lastChild; // Letztes Kindelement.lastElementChild; // Letztes Element-KindGeschwisterknoten
Abschnitt betitelt „Geschwisterknoten“element.nextSibling; // Nächster Geschwisterknotenelement.nextElementSibling; // Nächstes Geschwisterelementelement.previousSibling; // Vorheriger Geschwisterknotenelement.previousElementSibling; // Vorheriges GeschwisterelementWarum ist das DOM wichtig?
Abschnitt betitelt „Warum ist das DOM wichtig?“- Interaktivität: Das DOM ermöglicht es, auf Benutzeraktionen zu reagieren und die Seite entsprechend anzupassen
- Dynamische Inhalte: Sie können Inhalte nachladen oder ändern, ohne die Seite neu laden zu müssen
- Validierung: Formulareingaben können überprüft werden, bevor sie an den Server gesendet werden
- Animationen und Effekte: Visuelle Änderungen können implementiert werden
- Single-Page Applications: Moderne Webanwendungen nutzen das DOM intensiv, um nahtlose Benutzererfahrungen zu bieten
Das DOM vs. HTML
Abschnitt betitelt „Das DOM vs. HTML“Es ist wichtig zu verstehen, dass das DOM nicht dasselbe ist wie Ihr HTML-Code:
- HTML ist der statische Quellcode, den Sie schreiben
- DOM ist die dynamische Baumstruktur, die vom Browser erstellt wird
Der Browser korrigiert automatisch Fehler in Ihrem HTML und fügt fehlende Elemente hinzu. Ausserdem kann JavaScript das DOM nach dem Laden der Seite verändern, ohne dass sich der ursprüngliche HTML-Code ändert.
Das DOM und der Browser-Rendering-Prozess
Abschnitt betitelt „Das DOM und der Browser-Rendering-Prozess“Zum besseren Verständnis des DOM ist es hilfreich, den Rendering-Prozess im Browser zu kennen:
- Der Browser lädt den HTML-Code
- Der Parser verarbeitet den HTML-Code und erstellt das DOM
- Der CSS-Parser erstellt das CSSOM (CSS Object Model)
- DOM und CSSOM werden zum Render-Tree kombiniert
- Das Layout wird berechnet (Grössen und Positionen)
- Die Seite wird auf den Bildschirm gezeichnet (Painting)
Wenn JavaScript das DOM verändert, können Teile dieses Prozesses wiederholt werden, um die Änderungen anzuzeigen.
Browser-Kompatibilität
Abschnitt betitelt „Browser-Kompatibilität“Heute ist die DOM-Unterstützung in allen modernen Browsern weitgehend standardisiert. Früher gab es erhebliche Unterschiede, weshalb Bibliotheken wie jQuery populär wurden.
Mit modernem JavaScript und aktuellen Browsern können Sie aber problemlos direkt mit dem DOM arbeiten, ohne zusätzliche Bibliotheken zu benötigen.
Einschränkungen des DOM
Abschnitt betitelt „Einschränkungen des DOM“Das DOM kann bei sehr komplexen oder häufigen Änderungen zu Leistungsproblemen führen:
- Jede DOM-Manipulation kann ein Re-Rendering auslösen
- Viele kleine Änderungen können die Seite verlangsamen
- Grosse DOM-Bäume verbrauchen mehr Speicher
Deshalb nutzen moderne Frameworks wie React, Vue oder Angular virtuelle DOMs oder andere Optimierungen, um effiziente Updates zu ermöglichen.
Übung: Das DOM erkunden
Abschnitt betitelt „Übung: Das DOM erkunden“Zusammenfassung
Abschnitt betitelt „Zusammenfassung“- Das DOM (Document Object Model) ist eine Baumstruktur, die Ihre HTML-Seite als manipulierbare Objekte darstellt
- Das document-Objekt ist der Einstiegspunkt für den Zugriff auf das DOM
- Der DOM-Baum besteht aus verschiedenen Knotentypen wie Elementen, Text und Attributen
- Sie können durch den DOM-Baum navigieren, indem Sie Beziehungen zwischen Knoten (Eltern, Kinder, Geschwister) nutzen
- Das DOM ermöglicht dynamische Webseiten, da es mit JavaScript verändert werden kann
- Das DOM ist nicht dasselbe wie Ihr HTML-Code, sondern eine im Browser erstellte Repräsentation
Im nächsten Kapitel werden wir lernen, wie man Elemente im DOM gezielt auswählt und bearbeitet.