JavaScript - DOM-Navigation

Hallo zusammen, zukünftige JavaScript-Zauberer! ? Seid ihr bereit, eine aufregende Reise durch die magische Welt der DOM-Navigation anzutreten? Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, dich auf diesem Abenteuer zu führen. Also, schnappt euch euren virtuellen Kompass und los geht's!

JavaScript - DOM Navigation

Was sind DOM-Knoten?

Stellt euch das DOM (Document Object Model) als Familiengeschichte für eure Webseite vor. Jedes Element in diesem Baum wird als Knoten bezeichnet. Genau wie in einer richtigen Familie haben diese Knoten Beziehungen zueinander – Eltern, Kinder und Geschwister. Cool, oder?

Schauen wir uns ein einfaches Beispiel an:

<html>
<head>
<title>MeineAwesomeSeite</title>
</head>
<body>
<h1>Willkommen!</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>

In dieser "Familie" ist das <html>-Element der Urgroßelternteil, <head> und <body> sind seine Kinder und so weiter. Jedes dieser Elemente ist ein Knoten in unserem DOM-Baum.

Beziehungen zwischen HTML DOM-Knoten

Nun, da wir verstehen, was Knoten sind, lassen uns die Beziehungen zwischen ihnen erkunden. In unserem DOM-Familienbaum:

Elternteile haben Kinder
Kinder haben Eltern
Geschwister sind Knoten mit demselben Elternteil

Zum Beispiel in unserem vorherigen HTML:

<html> ist der Elternteil von <head> und <body>
<head> und <body> sind Geschwister
<h1> und <p> sind Kinder von <body>

Navigation zwischen Knoten mit JavaScript

Zeit, unsere Entdeckerhüte aufzusetzen! ? JavaScript gibt uns einige nützliche Werkzeuge, um zwischen diesen Knoten zu navigieren. Lassen wir uns hineintauchen!

Zugriff auf das erste Kindenelement

Um das erste Kind eines Elements zu erhalten, verwenden wir die Eigenschaft firstElementChild. So geht's:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Ausgabe: H1

In diesem Beispiel finden wir das erste Kind des <body>-Tags, das unser <h1>-Element ist.

Zugriff auf das letzte Kinderelement

Ähnlich können wir das letzte Kind mit lastElementChild finden:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Ausgabe: P

Hier erhalten wir das letzte Kind von <body>, das unser <p>-Element ist.

Zugriff auf alle Kinder eines HTML-Elements

Möchtet ihr alle Kinder sehen? Verwendet children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Ausgabe:
// H1
// P

Dieser Code durchläuft alle Kinder von <body> und protokolliert ihre Tag-Namen.

Zugriff auf den Elternteil eines HTML-Elements

Um den Elternteil eines Knotens zu finden, verwenden wir parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Ausgabe: BODY

Hier finden wir den Elternteil unseres <h1>-Elements, das <body> ist.

Zugriff auf das nächste Geschwisterknoten

Um das nächste Geschwister zu finden, verwenden wir nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Ausgabe: P

Dieser Code findet das Geschwister, das nach unserem <h1> kommt, das <p>-Element.

Zugriff auf das vorherige Geschwisterknoten

Und für das vorherige Geschwister verwenden wir previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Ausgabe: H1

Hier finden wir das Geschwister vor unserem <p>, das <h1> ist.

DOM-Wurzelknoten

Jede Familiengeschichte hat ihre Wurzeln, und im DOM haben wir drei Hauptwurzeln:

document.documentElement - Das Wurzelelement (normalerweise <html>)
document.head - Das <head>-Element
document.body - Das <body>-Element

console.log(document.documentElement.tagName); // Ausgabe: HTML
console.log(document.head.tagName); // Ausgabe: HEAD
console.log(document.body.tagName); // Ausgabe: BODY

DOM nodeName-Eigenschaft

Jeder Knoten hat einen Namen, den wir über die Eigenschaft nodeName abrufen können:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Ausgabe: H1

DOM nodeValue-Eigenschaft

Die Eigenschaft nodeValue gibt uns den Wert eines Knotens. Für Textknoten ist dies der Textinhalt:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Ausgabe: Willkommen!

Arten von Knoten im DOM

Nicht alle Knoten sind gleich! Es gibt verschiedene Arten von Knoten im DOM. Hier sind die wichtigsten:

Knotentyp	Beschreibung	nodeType-Wert
Element Knoten	Jedes HTML-Element (wie `<p>`, `<div>`, etc.)	1
Attribut Knoten	Ein Attribut eines HTML-Elements	2
Text Knoten	Der Text innerhalb eines HTML-Elements	3
Kommentar Knoten	Ein HTML-Kommentar	8
Dokument Knoten	Das gesamte Dokument	9

DOM nodeType-Eigenschaft

Wir können die Eigenschaft nodeType verwenden, um zu bestimmen, welchen Typ von Knoten wir vorliegen haben:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('Dies ist ein Kommentar');

console.log(element.nodeType); // Ausgabe: 1 (Element Knoten)
console.log(textNode.nodeType); // Ausgabe: 3 (Text Knoten)
console.log(commentNode.nodeType); // Ausgabe: 8 (Kommentar Knoten)

Und da habt ihr es, Leute! Ihr habt durch den DOM navigiert wie ein Profi. Denkt daran, Übung macht den Meister, alsochtet nicht, diese Konzepte auszuprobieren. Bevor ihr es wisst, seid ihr schneller durch den DOM-Baum als ein Eichhörnchen in einer Nussfabrik! ?️

Frohes Coden und möge der DOM mit euch sein! ?

Credits: Image by storyset

Vorheriges Tutorial:

JavaScript - DOM-Animation

Nächstes Tutorial:

JavaScript - DOM-Sammlungen