Heim > Artikel > Web-Frontend > Das Document Object Model (DOM) verstehen

Das Document Object Model (DOM) verstehen

Susan SarandonOriginal: 2024-10-13 06:18:02759Durchsuche

Understanding the Document Object Model (DOM)

Das Document Object Model (DOM) ist ein entscheidendes Konzept für Webentwickler, da es die Struktur eines Dokuments definiert und eine dynamische Interaktion mit HTML- und XML-Dokumenten ermöglicht. Dieser Leitfaden hilft Ihnen, das DOM, seine Struktur und seine Manipulation mit JavaScript zu verstehen.

Was ist das DOM?

Definition: Das DOM ist eine Programmierschnittstelle für Webdokumente. Es stellt das Dokument als Baum von Objekten dar und ermöglicht es Skripten, den Inhalt, die Struktur und den Stil eines Dokuments zu aktualisieren, während es angezeigt wird.
Baumstruktur: Das DOM stellt ein Dokument als Baum von Knoten dar. Jeder Knoten stellt einen Teil des Dokuments dar, beispielsweise ein Element, ein Attribut oder einen Text.

DOM-Struktur

Knotentypen

Dokumentknoten: Die Wurzel des DOM-Baums. Stellt das gesamte Dokument dar.
Elementknoten: Stellt ein HTML-Element dar (z. B.
,
, ).

Textknoten: Stellt den Text innerhalb eines Elements dar.

Attributknoten: Stellt die Attribute eines Elements dar (z. B. Klasse, ID).

Kommentarknoten: Stellt Kommentare im HTML dar.

Beispiel eines DOM-Baums

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

DOM-Darstellung:

Document
├── html (Element)
│   ├── head (Element)
│   │   └── title (Element)
│   │       └── "My Page" (Text)
│   └── body (Element)
│       ├── h1 (Element)
│       │   └── "Hello, World!" (Text)
│       └── p (Element)
│           └── "This is a paragraph." (Text)

Zugriff auf das DOM

Elemente auswählen

getElementById: Wählt ein einzelnes Element anhand seiner ID aus.

  const element = document.getElementById('myId');

getElementsByClassName: Gibt eine Live-HTMLCollection von Elementen mit dem angegebenen Klassennamen zurück.

  const elements = document.getElementsByClassName('myClass');

getElementsByTagName: Gibt eine Live-HTMLCollection von Elementen mit dem angegebenen Tag-Namen zurück.

  const elements = document.getElementsByTagName('div');

querySelector: Wählt das erste Element aus, das einem CSS-Selektor entspricht.

  const element = document.querySelector('.myClass');

querySelectorAll: Gibt eine statische NodeList aller Elemente zurück, die einem CSS-Selektor entsprechen.

  const elements = document.querySelectorAll('div.myClass');

Elemente manipulieren

Inhalt ändern:

  const element = document.getElementById('myId');
  element.textContent = 'New Content';

Attribute ändern:

  const element = document.getElementById('myId');
  element.setAttribute('class', 'newClass');

Stile ändern:

  const element = document.getElementById('myId');
  element.style.color = 'blue';

Elemente erstellen und anhängen:

  const newElement = document.createElement('div');
  newElement.textContent = 'I am a new div';
  document.body.appendChild(newElement);

Elemente entfernen:

  const element = document.getElementById('myId');
  element.parentNode.removeChild(element);

DOM-Ereignisse

Ereignisse sind Aktionen oder Ereignisse, die im Browser stattfinden, und Sie können mit Ereignishandlern darauf reagieren.

Hinzufügen von Ereignis-Listenern

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

Gemeinsame Ereignisse

Klick: Wird ausgelöst, wenn auf ein Element geklickt wird.
Mouseover: Wird ausgelöst, wenn die Maus über ein Element schwebt.
keydown: Wird ausgelöst, wenn eine Taste gedrückt wird.
Senden: Wird ausgelöst, wenn ein Formular gesendet wird.

Abschluss

Das Verständnis des DOM ist für die Webentwicklung von entscheidender Bedeutung, da es eine Möglichkeit bietet, mit Webseiten zu interagieren und diese zu bearbeiten. Wenn Sie die DOM-Manipulation beherrschen, können Sie dynamische und interaktive Webanwendungen erstellen.

Schauen Sie sich gerne tiefer in die Dokumentation ein und experimentieren Sie mit den verschiedenen Methoden und Eigenschaften, die in der DOM-API verfügbar sind. Viel Spaß beim Codieren!

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

JavaScript css html Static Object for while xml using class Interface Attribute Event dom this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JSON.parse, aber ohne FehlerNächster Artikel：JSON.parse, aber ohne Fehler

In Verbindung stehende Artikel

Mehr sehen