Das DOM (Document Object Model) ist das Hauptmodell für die Darstellung von Dokumenten einer Webseite und definiert deren Struktur und Inhalt, sodass sie für die programmatische Interaktion verfügbar sind. Das DOM erstellt einen hierarchischen Baum, in dem jedes Element (z. B. eine Überschrift, ein Absatz, ein Bild usw.) als Objekt dargestellt wird. Das Verständnis der Funktionsweise des DOM ist eine wichtige Grundlage für den Entwickler von Webseiten, da es ihnen ermöglicht, den Inhalt und die Struktur der Seite mit JavaScript zu ändern.
Der DOM-Baum hat ein Stammelement, das die gesamte Webseite darstellt und der Startzugriffspunkt für alle anderen Elemente ist. Jedes Element im Baum hat einen Elternteil, Kinder und Nachbarn. Auf diese Weise ermöglicht das DOM den Zugriff und die Änderung aller Elemente einer Webseite durch einfache Manipulation von Zeigern auf Objekte.
Die Interaktion mit dem DOM erfolgt über die JavaScript-Sprache. Jedes Element einer Webseite verfügt über eine eindeutige ID, mit der Sie es in der DOM-Struktur finden und verschiedene Operationen darauf ausführen können. Die Interaktion mit dem DOM kann das Ändern des Textinhalts, das Hinzufügen oder Entfernen von Elementen, das Ändern von Attributen und vieles mehr umfassen. JavaScript stellt verschiedene Methoden bereit, um auf DOM-Objekte zuzugreifen und sie zu manipulieren. Um beispielsweise den Textinhalt eines Elements zu ändern, können Sie Folgendes verwenden innerHTML um ein neues Element hinzuzufügen, können Sie Folgendes verwenden createElement.
Die DOM-Struktur und ihre Elemente
Das DOM (Document Object Model) ist eine Struktur, die vom Browser beim Laden einer Webseite erstellt wird. Jedes Element eines HTML-Dokuments wird in der DOM-Struktur als Knoten dargestellt.
Die Hauptelemente des DOM sind:
- Elemente - sind HTML-Tags (zB, , , ) und sind die Hauptbausteine einer Webseite.
- Requisit - enthält Informationen zu jedem einzelnen Element und wird verwendet, um zusätzliche Merkmale festzulegen. Zum Beispiel ein Attribut id gibt den eindeutigen Bezeichner für das Element und das Attribut an class gruppiert Elemente mit denselben Stilen.
- Textknoten - enthalten den Text, der in den Elementen angezeigt wird (z. B. Text zwischen den Tags und ).
- Kommentare - kann vom Entwickler zur Erläuterung des Codes hinzugefügt werden und wird nicht in der Webseite angezeigt. Sie werden im DOM als separate Knoten dargestellt.
Die DOM-Struktur zeigt eine Elementhierarchie an, in der jedes Element ein übergeordnetes, untergeordnetes oder benachbartes Element sein kann. Das Stammelement ist jedoch ein Element, das alle anderen Elemente enthält.
Wenn Sie die DOM-Struktur und ihre Elemente kennen, kann ein Entwickler Elemente manipulieren, ihre Eigenschaften hinzufügen, entfernen oder ändern sowie auf Ereignisse reagieren, die im Browser auftreten.
DOM-Interaktion: Methoden und Eigenschaften
Die wichtigsten Methoden für die Arbeit mit DOM sind:
- getElementById(id) - Gibt ein Element anhand seiner eindeutigen ID zurück.
- querySelector(selector) - gibt das erste Element zurück, das dem CSS-Selektor entspricht.
- querySelectorAll(selector) - gibt alle Elemente zurück, die dem CSS-Selektor entsprechen.
- createElement(tagName) - erstellt ein neues Element mit dem angegebenen Tag und gibt es zurück.
- appendChild(node) - Fügt am Ende der Liste der untergeordneten Elemente des angegebenen Elements einen Knoten (ein Element oder einen Textknoten) hinzu.
- removeChild(node) - Entfernt den angegebenen Knoten aus der Liste der untergeordneten Elemente des angegebenen Elements.
- setAttribute(name, value) - legt den Wert des Attributs mit dem angegebenen Namen fest.
- getAttribute(name) - gibt den Wert des Attributs mit dem angegebenen Namen zurück.
Mit DOM-Objekteigenschaften können Sie verschiedene Attribute und Werte von Elementen abrufen und ändern:
- innerHTML - inhalt des Elements als HTML-Markup.
- textContent - der Textinhalt des Elements.
- value - der Eingabewert für das Formularelement.
- style - Elementstile.
- className - Elementklassen.
- id - eindeutige ID des Elements.
Mithilfe dieser Methoden und Eigenschaften können Entwickler das Aussehen und Verhalten einer Webseite dynamisch ändern, auf benutzerdefinierte Aktionen reagieren und Ereignisse verarbeiten.
DOM-Manipulation: Hinzufügen, Entfernen und Ändern von Elementen
Das Hinzufügen neuer Elemente zum DOM kann mit verschiedenen Methoden erreicht werden. Mit der createElement() -Methode können Sie beispielsweise ein neues Element erstellen, das mithilfe der appendChild() -Methode in die DOM-Struktur eingebettet werden kann.
Das Entfernen von DOM-Elementen ist ebenfalls ein wichtiger Aspekt. Mithilfe der removeChild() -Methode können Sie ein Element entfernen, um das angegebene Element aus dem übergeordneten Element zu entfernen.
DOM-Elemente können mit verschiedenen Eigenschaften und Methoden geändert werden. Mit der textContent-Eigenschaft können Sie beispielsweise den Textinhalt eines Elements ändern, und mit den Methoden setAttribute() und removeAttribute() können Sie Elementattribute festlegen und entfernen.
Darüber hinaus gibt es auch spezielle Methoden, mit denen Sie die DOM-Struktur manipulieren können. Mit den insertBefore() - und replaceChild() -Methoden können Sie beispielsweise ein neues Element vor einem angegebenen Element hinzufügen oder das angegebene Element durch ein neues ersetzen.
Bei der Arbeit mit DOM ist es wichtig, daran zu denken, dass die Manipulation von Elementen die Struktur und das Erscheinungsbild der Seite beeinflussen kann. Daher ist es wichtig, beim Ändern des DOM vorsichtig zu sein und sicherzustellen, dass die richtige Reihenfolge von Operationen erreicht wird, um das gewünschte Ergebnis zu erzielen.
| Methode | Die Beschreibung |
|---|---|
| createElement() | Erstellt ein neues Element |
| appendChild() | Fügt das erstellte Element dem DOM hinzu |
| removeChild() | Entfernt das angegebene Element aus dem DOM |
| textContent | Ändert den Textinhalt eines Elements |
| setAttribute() | Legt das Elementattribut fest |
| removeAttribute() | Entfernt ein Elementattribut |
| insertBefore() | Fügt ein Element vor dem angegebenen Element hinzu |
| replaceChild() | Ersetzt das angegebene Element durch ein neues |
Das Verständnis der grundlegenden DOM-Manipulationsmethoden und -eigenschaften bietet die Möglichkeit, dynamische und interaktive Webseiten zu erstellen.
DOM-Ereignisse und deren Verarbeitung
Die Verarbeitung von DOM-Ereignissen ist der Prozess, eine Funktion an ein bestimmtes Ereignis zu binden und diese Funktion auszuführen, wenn ein Ereignis eintritt. Sie können verschiedene Methoden zum Behandeln von DOM-Ereignissen verwenden, z. B. das Hinzufügen von Ereignishandlerattributen oder das Binden von Ereignislistenern.
Das Hinzufügen von Ereignishandlerattributen ist eine einfache Möglichkeit, eine Ereignisfunktion mit einem Element auf einer Webseite zu verknüpfen. Beispielsweise können Sie einem Element ein Attribut "onclick" hinzufügen und eine Funktion angeben, die aufgerufen werden soll, wenn Sie auf diese Schaltfläche klicken.
Das Binden von Ereignislistenern ist eine flexiblere Möglichkeit, DOM-Ereignisse zu behandeln. Ereignis-Listener können jedem Element auf einer Webseite hinzugefügt werden und ermöglichen es Ihnen, mehrere verschiedene Ereignisse für dieses Element zu verfolgen. Sie können beispielsweise einen Listener für das Click-Ereignis für ein Element erstellen und eine Funktion angeben, die bei jedem Klick auf diese Schaltfläche aufgerufen wird.
Bei der Verarbeitung von DOM-Ereignissen können Sie mit JavaScript auf Seitenelemente zugreifen, deren Eigenschaften ändern und verschiedene Aktionen ausführen. Wenn Sie beispielsweise ein Click-Ereignis behandeln, können Sie den Inhalt eines Elements ändern oder das Element ausblenden.
Die Verarbeitung von DOM-Ereignissen ist ein wichtiger Teil des Erstellens dynamischer und interaktiver Webseiten. Wenn Sie die grundlegenden Funktionsweise von DOM-Ereignissen verstehen, können Sie reaktionsfähigere und Benutzeroberflächen auf Websites erstellen.
