JavaScript - Document Object Model (DOM)

Was ist DOM?

Das Document Object Model, kurz DOM, ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es stellt die Struktur eines Dokuments als baumartige Hierarchie von Objekten dar, wobei jedes Objekt einem Teil des Dokuments entspricht, wie einem Element, Attribut oder Textknoten.

JavaScript - HTML DOM

Stellen Sie sich vor, Sie bauen ein Haus mit Lego-Steinen. Das DOM ist wie ein magisches Bauplan, das Ihnen nicht nur zeigt, wie das Haus gebaut ist, sondern Ihnen auch ermöglicht, die Steine mit JavaScript zu manipulieren und umzustellen. Es ist ein leistungsstarkes Werkzeug, das die Lücke zwischen Webseiten und Programmiersprachen überbrückt.

Schlüsselbegriffe des DOM

Node: Jeder Teil des Dokuments ist ein Knoten. Elemente, Attribute und Text sind alle verschiedene Arten von Knoten.
Baumstruktur: Das DOM stellt das Dokument als Baum mit dem document-Objekt an der Wurzel dar.
Navigation: Sie können durch den DOM-Baum mit verschiedenen Methoden und Eigenschaften navigieren.
Manipulation: Das DOM ermöglicht es Ihnen, die Struktur, das Styling und den Inhalt des Dokuments dynamisch zu ändern.

Schauen wir uns ein einfaches Beispiel an, um diese Konzepte zu verdeutlichen:

<!DOCTYPE html>
<html>
<head>
<title>Mein erstes DOM-Beispiel</title>
</head>
<body>
<h1 id="mainHeading">Willkommen bei DOM</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>

In diesem HTML-Dokument würde der DOM-Baum大概 so aussehen:

document
└── html
├── head
│   └── title
│       └── "Mein erstes DOM-Beispiel"
└── body
├── h1
│   └── "Willkommen bei DOM"
└── p
└── "Dies ist ein Absatz."

Was ist HTML DOM?

Das HTML DOM ist ein Standard-Objektmodell und eine Programmierschnittstelle für HTML. Es definiert:

Die HTML-Elemente als Objekte
Die Eigenschaften aller HTML-Elemente
Die Methoden zum Zugriff auf alle HTML-Elemente
Die Ereignisse für alle HTML-Elemente

Im Wesentlichen ist das HTML DOM ein Standard dafür, wie man HTML-Elemente abruft, ändert, hinzufügt oder löscht.

Arbeiten mit dem HTML DOM

Lassen Sie uns einige gängige Operationen mit dem HTML DOM erkunden:

Zugriff auf Elemente

// Ein Element nach seiner ID abrufen
const heading = document.getElementById('mainHeading');

// Elemente nach ihrem Tag-Namen abrufen
const paragraphs = document.getElementsByTagName('p');

// Elemente nach ihrem Klassen-Namen abrufen
const highlights = document.getElementsByClassName('highlight');

// querySelector für komplexere Auswahlen verwenden
const firstParagraph = document.querySelector('p');

In diesen Beispielen verwenden wir verschiedene Methoden, um Elemente aus unserem HTML-Dokument auszuwählen. Es ist, als ob man mit einer magischen Zauberstab auf spezifische Teile der Webseite zeigt!

Inhalt ändern

// Den Textinhalt eines Elements ändern
heading.textContent = 'Willkommen in der wundersamen Welt von DOM!';

// Den HTML-Inhalt eines Elements ändern
paragraphs[0].innerHTML = 'Dieser Absatz wurde <strong>geändert</strong>!';

Hier ändern wir den Inhalt unserer Elemente. Es ist, als ob man Teile der Webseite sofort auswischt und neu schreibt!

Stile ändern

// Den Stil eines Elements ändern
heading.style.color = 'blau';
heading.style.fontSize = '24px';

Mit diesen Zeilen geben wir unserem Titel eine Überarbeitung, ändern seine Farbe und Größe. Es ist, als ob man einen Modedesigner für Web-Elemente hat!

Erstellen und Entfernen von Elementen

// Ein neues Element erstellen
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Dies ist ein neu erstellter Absatz.';

// Das neue Element zum Dokument hinzufügen
document.body.appendChild(newParagraph);

// Ein Element entfernen
document.body.removeChild(paragraphs[0]);

In diesem Beispiel spielen wir die Rolle eines Webseiten-Architekten – wir bauen neue Elemente und demontieren alte mit nur wenigen Zeilen Code!

Warum ist DOM erforderlich?

Das DOM ist aus mehreren Gründen unerlässlich:

Dynamische Webseiten: Ohne das DOM wären Webseiten statisch. Das DOM ermöglicht es uns, interaktive und dynamische Web-Erfahrungen zu schaffen.
Trennung der Verantwortlichkeiten: Das DOM bietet eine Möglichkeit, den Inhalt und die Struktur einer Webseite mit JavaScript zu manipulieren, und hält dies von HTML und CSS getrennt.
Cross-Browser-Kompatibilität: Das DOM bietet eine standardisierte Programmierschnittstelle, die in verschiedenen Browsern funktioniert, ensuring Konsistenz in der Web-Entwicklung.
Ereignisverarbeitung: Das DOM ermöglicht es uns, Ereignis-Listener an Elementen zu anhängen, um auf Benutzerinteraktionen wie Klicks, Tastatureingaben und Mausbewegungen zu reagieren.
AJAX und Einzellseitenanwendungen: Das DOM ist entscheidend für das Aktualisieren von Teilen einer Webseite ohne Neuladen der gesamten Seite, was die Grundlage moderner Webanwendungen bildet.

Schauen wir uns ein Beispiel an, das viele dieser Konzepte zusammenführt:

<!DOCTYPE html>
<html>
<head>
<title>ToDo-Liste</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>Meine ToDo-Liste</h1>
<input type="text" id="newTodo">
<button id="addTodo">ToDo hinzufügen</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

Dieses Beispiel zeigt eine einfache ToDo-Listen-Anwendung. Es zeigt:

Zugriff auf Elemente mit dem DOM
Erstellen neuer Elemente
Ändern des Inhalts und Stils von Elementen
Ereignisverarbeitung
Dynamische Aktualisierung der Seite ohne Neuladen

Durch die Verwendung des DOM haben wir eine interaktive Anwendung geschaffen, die auf Benutzerinput reagiert und in Echtzeit aktualisiert wird. Dies ist die Macht des DOM in Aktion!

Gängige DOM-Methoden und Eigenschaften

Hier ist eine Tabelle einige häufig verwendeter DOM-Methoden und Eigenschaften:

Methode/Eigenschaft	Beschreibung
`getElementById()`	Gibt das Element mit der angegebenen ID zurück
`getElementsByClassName()`	Gibt eine Sammlung von Elementen mit dem angegebenen Klassen-Namen zurück
`getElementsByTagName()`	Gibt eine Sammlung von Elementen mit dem angegebenen Tag-Namen zurück
`querySelector()`	Gibt das erste Element zurück, das einem CSS-Selektor entspricht
`querySelectorAll()`	Gibt alle Elemente zurück, die einem CSS-Selektor entsprechen
`createElement()`	Erstellt ein neues Element
`appendChild()`	Fügt ein neues Kind-Element hinzu
`removeChild()`	Entfernt ein Kind-Element
`innerHTML`	Ruft oder setzt den HTML-Inhalt eines Elements ab
`textContent`	Ruft oder setzt den Text-Inhalt eines Elements ab
`style`	Ruft oder setzt denInline-Stil eines Elements ab
`classList`	Ermöglicht die Manipulation der Klassen eines Elements
`addEventListener()`	Hängt einen Ereignis-Handler an ein Element an

Zusammenfassend ist das DOM ein leistungsstarkes Werkzeug, das Leben in Webseiten bringt. Es ermöglicht die Erstellung dynamischer, interaktiver Erfahrungen, die auf Benutzerinteraktionen reagieren und in Echtzeit aktualisiert werden. Auf Ihrem Weg in der Web-Entwicklung werden Sie das DOM als unersetzlichen Verbündeten für die Erstellung ansprechender und reaktionsschneller Webanwendungen finden. Viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:

JavaScript - var Schlüsselwort

Nächstes Tutorial:

JavaScript - DOM-Methoden