Was ist DOM (Document Object Model) in JavaScript?

Das DOM (Document Object Model) ist eine Programmierschnittstelle für Webdokumente. Es stellt die Struktur einer Webseite als Baum von Objekten dar, wobei jedes Objekt einem Teil der Seite entspricht, z. B. Elementen, Attributen und Textinhalten.

In JavaScript ermöglicht Ihnen das DOM die programmgesteuerte Interaktion mit HTML- oder XML-Dokumenten. Es ermöglicht Ihnen, den Inhalt, die Struktur und den Stil einer Webseite dynamisch zu ändern.

Schlüsselkonzepte des DOM:

1. Dokument: Bezieht sich auf die gesamte Webseite.
2. Element: Stellt HTML-Tags wie
   ,

   , usw. dar.

3. Knoten: Eine Grundeinheit im DOM-Baum, die ein Element, Text oder Attribut sein kann.
4. DOM-Baum: Eine hierarchische Struktur, die die Webseite als Knotenbaum darstellt. Der Wurzelknoten ist das Dokument und jedes HTML-Element ist ein davon ausgehender Knoten.

Beispiel einer DOM-Darstellung:

Für ein HTML-Dokument wie:


  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

Wie JavaScript das DOM verwendet:

1. Zugriff auf Elemente: JavaScript kann mithilfe von Methoden wie document.getElementById() oder document.querySelector() Elemente aus dem DOM auswählen und darauf zugreifen.

   let heading = document.getElementById("content");

1. Elemente manipulieren: JavaScript kann den Inhalt, die Attribute oder den Stil von Elementen ändern.

   heading.innerHTML = "New Content";
   heading.style.color = "red";

1. Ereignisbehandlung: JavaScript kann Ereignis-Listener an DOM-Elemente anhängen, um auf Benutzeraktionen wie Klicks, Tastendrücke usw. zu reagieren.

   document.getElementById("myButton").addEventListener("click", function() {
     alert("Button clicked!");
   });

1. Elemente erstellen und entfernen: JavaScript kann dynamisch neue Elemente erstellen oder vorhandene entfernen.

   const newElement = document.createElement("div");
   document.body.appendChild(newElement);

Warum das DOM wichtig ist:

• Es bietet JavaScript die Möglichkeit, mit der Struktur und dem Inhalt einer Webseite zu interagieren und diese zu manipulieren.
• Es ermöglicht dynamische, interaktive Webseiten, ohne dass ein Neuladen der Seite erforderlich ist (z. B. zum Aktualisieren der Benutzeroberfläche oder zum Verarbeiten von Benutzereingaben).

DOM-Methoden:

Hier sind einige häufig verwendete DOM-Methoden in JavaScript:

• getElementById(): Wählt ein Element anhand seiner ID aus.
• querySelector(): Wählt das erste passende Element mithilfe eines CSS-Selektors aus.
• createElement(): Erstellt ein neues HTML-Element.
• appendChild(): Fügt einem Element einen neuen untergeordneten Knoten hinzu.
• removeChild(): Entfernt einen untergeordneten Knoten aus einem Element.
• setAttribute(): Setzt ein Attribut für ein Element.
• addEventListener(): Fügt einem Element einen Event-Handler hinzu.

Beispiel in Aktion:

  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

In diesem Beispiel wird das h1-Element ausgewählt, sein Inhalt aktualisiert und ein Klickereignis-Listener daran angehängt. Wenn auf die Überschrift geklickt wird, wird eine Warnung angezeigt.

Das DOM ist ein wesentliches Konzept für die dynamische Manipulation der Struktur von Webseiten mit JavaScript und von grundlegender Bedeutung für die Erstellung interaktiver Webanwendungen.