1.1 Grundkonzepte des DOM
Das Document Object Model (DOM) ist eine Programmierschnittstelle für Web-Dokumente. Es stellt die Struktur des Dokuments als Baum von Knoten dar, wobei jeder Knoten ein Teil des Dokuments ist, wie ein Element, Text, Kommentar und so weiter. Das Verständnis von DOM und seinen Knoten ist ein grundlegender Aspekt der Arbeit mit Web-Technologien.
Grundkonzepte des DOM
Was ist das DOM?
Das DOM (Document Object Model) stellt eine hierarchische Struktur dar, die den Inhalt eines HTML-Dokuments beschreibt. Es ermöglicht Programmen und Skripten den dynamischen Zugriff auf den Dokumentinhalt und das Ändern seiner Struktur, seines Stils und Inhalts.
Knoten und Elemente
Im Kontext des DOM werden alle Teile eines Dokuments als Knoten (node) betrachtet. Knoten gibt es in mehreren Arten:
- Elementknoten: stellen HTML-Tags dar.
- Textknoten: stellen den Text dar, der sich innerhalb von Elementknoten befindet.
- Kommentar-Knoten: stellen HTML-Kommentare dar.
- Dokumentknoten: repräsentieren das Dokument selbst.
Baumstruktur der Knoten
Das DOM stellt eine baumartige Struktur dar, bei der jeder Knoten Nachkommen (Kinderknoten) haben kann. Der Wurzelknoten ist das Objekt document, das das gesamte HTML-Dokument repräsentiert.
Beispiel einer DOM-Struktur:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Für dieses Dokument würde der DOM-Baum wie folgt aussehen:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Knotentypen
1. Elementknoten
Elementknoten entsprechen HTML-Tags. Zum Beispiel wird der Knoten für das <body>-Tag als Elementknoten bezeichnet.
Beispiel:
In diesem Beispiel sind <body> und <h1> Elementknoten.
<body>
<h1>Hello, World!</h1>
</body>
2. Textknoten
Textknoten enthalten den Text innerhalb von Elementknoten. Textknoten sind Nachkommen von Elementknoten und enthalten Zeichenfolgen.
Beispiel:
In diesem Beispiel ist der Text "Hello, World!" ein Textknoten, der Nachfahre des <h1>-Knotens ist.
<h1>Hello, World!</h1>
3. Kommentar-Knoten
Kommentar-Knoten repräsentieren Kommentare in HTML, die mit <!-- beginnen und mit --> enden.
Beispiel:
In diesem Beispiel ist <!-- This is a comment --> ein Kommentar-Knoten.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Dokumentknoten
Der Dokumentknoten stellt den Wurzelknoten des DOM-Baums dar und ist der übergeordnete Knoten für alle anderen Knoten im Dokument.
Beispiel:
Das Objekt document in JavaScript stellt den Dokumentknoten dar:
console.log(document);
1.3 Interaktion mit DOM-Knoten
1. Informationen über Knoten erhalten
Die Objekt-Eigenschaften eines Knotens ermöglichen es, Informationen über einen bestimmten Knoten zu erhalten. So kann man zum Beispiel den Knotentyp, seinen Namen und seinen Inhalt herausfinden.
Beispiel:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<h1>Hallo, Welt!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Ausgabe: H1
console.log(heading.nodeType); // Ausgabe: 1 (Elementknoten)
console.log(heading.textContent); // Ausgabe: "Hallo, Welt!"
2. Ändern des Inhalts von Knoten
Der Inhalt von Knoten kann mit den Eigenschaften und Methoden des DOM geändert werden.
Beispiel:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Aktualisierter Textinhalt';
3. Arbeiten mit Kinderknoten
Jeder DOM-Knoten kann Kinderknoten haben, auf die zugegriffen und die geändert werden können.
Beispiel:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<ul>
<li>Über uns</li>
<li>Karriere</li>
<li>Kontakt</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Gibt den Text des ersten Listenelements aus
console.log(lastItem.textContent); // Gibt den Text des letzten Listenelements aus
1.4 Nützliche Eigenschaften
1. Eigenschaften nodeName und nodeType
nodeNamegibt den Namen des Knotens zurücknodeTypegibt den Typ des Knotens zurück (z.B. 1 für Elementknoten, 3 für Textknoten)
Beispiel:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<h1>Hallo, Welt!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Ausgabe: H1
console.log(element.nodeType); // Ausgabe: 1
2. Eigenschaften textContent und innerHTML
textContentgibt den Textinhalt eines Knotens zurück oder setzt ihninnerHTMLgibt den HTML-Inhalt eines Knotens zurück oder setzt ihn
Beispiel:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<p>Ein wirklich <b>interessanter</b> und <b>nützlicher</b> Absatz!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Gibt den Textinhalt des Absatzes aus
console.log(element.innerHTML); // Gibt den HTML-Inhalt des Absatzes aus
3. Eigenschaften parentNode, childNodes, firstChild und lastChild
parentNodegibt den übergeordneten Knoten zurückchildNodesgibt eine Sammlung aller Kinderknoten zurückfirstChildgibt den ersten Kinderknoten zurücklastChildgibt den letzten Kinderknoten zurück
Beispiel:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<ul>
<li>Über uns</li>
<li>Karriere</li>
<li>Kontakt</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Gibt den übergeordneten Knoten aus
console.log(element.childNodes); // Gibt die Sammlung der Kinderknoten aus
console.log(element.firstChild); // Gibt den ersten Kinderknoten aus
console.log(element.lastChild); // Gibt den letzten Kinderknoten aus
GO TO FULL VERSION