Das Document Object Model (DOM) verstehen-js-Tutorial-php.cn

Das Document Object Model (DOM) verstehen

Susan Sarandon

Freigeben： 2024-10-13 06:18:02

Original

790 Leute haben es durchsucht

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>

Nach dem Login kopieren

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)

Nach dem Login kopieren

Zugriff auf das DOM

Elemente auswählen

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Elemente manipulieren

Inhalt ändern:

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

Nach dem Login kopieren

Attribute ändern:

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

Nach dem Login kopieren

Stile ändern:

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

Nach dem Login kopieren

Elemente erstellen und anhängen:

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

Nach dem Login kopieren

Elemente entfernen:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!