Was ist DOM (Document Object Model) in JavaScript?-js-Tutorial-php.cn

Was ist DOM (Document Object Model) in JavaScript?

Mary-Kate Olsen

Freigeben： 2024-11-27 18:30:11

Original

359 Leute haben es durchsucht

What is DOM (Document Object Modle) 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:

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

Knoten: Eine Grundeinheit im DOM-Baum, die ein Element, Text oder Attribut sein kann.

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:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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

Nach dem Login kopieren

Wie JavaScript das DOM verwendet:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonWas ist DOM (Document Object Model) in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!