JavaScript - DOM-Knotenlisten

Einführung in DOM-Knotenlisten

Hallo da draußen, ambitionierte Web-Entwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt der JavaScript DOM-Knotenlisten. Keine Sorge, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du Webseiten wie ein Profi manipulieren können!

Was ist eine DOM-Knotenliste?

Bevor wir eintauchen, lassen Sie uns mit den Grundlagen beginnen. Stell dir eine Webseite wie einen Familienstammbaum vor. Das DOM (Document Object Model) ist wie der Familienstammbaum für Webseiten. Jedes Element auf der Seite – sei es ein Absatz, ein Knopf oder ein Bild – ist ein Mitglied dieser Familie, oder in technischer Sprache, ein "Knoten".

Eine Knotenliste ist schlicht eine Sammlung dieser Knoten. Es ist so, als hättest du eine Gästeliste für eine Party, bei der jeder Gast ein Element von deiner Webseite ist.

Beispiel 1: Eine Knotenliste erhalten

Sehen wir uns ein einfaches Beispiel an:

<div>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
</div>

<script>
let absätze = document.querySelectorAll('p');
console.log(absätze);
</script>

In diesem Beispiel gibt querySelectorAll('p') eine Knotenliste zurück, die alle <p>-Elemente enthält. Wenn du dies in der Konsole deines Browsers ausführst, wirst du etwas wie folgt sehen:

NodeList(3) [p, p, p]

Dies tells uns, dass wir eine Knotenliste mit drei Absatzelementen haben.

Arbeiten mit Knotenlisten

Nun, da wir unsere Knotenliste haben, sehen wir uns an, was wir damit anfangen können!

Beispiel 2: Durch eine Knotenliste iterieren

let absätze = document.querySelectorAll('p');

absätze.forEach((absatz, index) => {
console.log(`Absatz ${index + 1}: ${absatz.textContent}`);
});

Dieser Code wird Folgendes ausgeben:

Absatz 1: Absatz 1
Absatz 2: Absatz 2
Absatz 3: Absatz 3

Hier verwenden wir die forEach-Methode, um durch jeden Absatz in unserer Knotenliste zu iterieren. Es ist, als ob wir durch unsere Gästeliste gehen und jeden Gast einzeln begrüßen!

Die Magie von Live- und Statischen Knotenlisten

Nun, hier wird es interessant. Knotenlisten können entweder "live" oder "statisch" sein.

Eine live Knotenliste ist wie eine magische Gästeliste, die sich selbst aktualisiert, wenn Gäste zur Party kommen oder abreisen. Im Gegensatz dazu ist eine statische Knotenliste wie ein Schnappschuss der Gästeliste zu einem bestimmten Zeitpunkt – sie ändert sich nicht, selbst wenn neue Gäste kommen.

Beispiel 3: Live Knotenliste

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let gäste = document.getElementsByTagName('li');
console.log(gäste.length); // Ausgabe: 2

let neuerGast = document.createElement('li');
neuerGast.textContent = 'Charlie';
document.getElementById('guestList').appendChild(neuerGast);

console.log(gäste.length); // Ausgabe: 3
</script>

In diesem Beispiel gibt getElementsByTagName eine live Knotenliste zurück. Wenn wir Charlie zur Liste hinzufügen, aktualisiert sich unsere gäste Knotenliste automatisch!

Beispiel 4: Statische Knotenliste

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let gäste = document.querySelectorAll('li');
console.log(gäste.length); // Ausgabe: 2

let neuerGast = document.createElement('li');
neuerGast.textContent = 'Charlie';
document.getElementById('guestList').appendChild(neuerGast);

console.log(gäste.length); // Ausgabe: 2
</script>

Hier gibt querySelectorAll eine statische Knotenliste zurück. Selbst nach dem Hinzufügen von Charlie ändert sich unsere gäste Knotenliste nicht. Es ist, als hätten wir ein Foto der Gästeliste gemacht und dieses Foto aktualisiert sich nicht, wenn neue Gäste kommen.

Der Unterschied zwischen HTMLCollection und NodeList

Nun, lassen Sie uns über zwei Cousins in der DOM-Familie sprechen: HTMLCollection und NodeList. Sie sind ähnlich, aber sie haben ihre eigenen einzigartigen Merkmale.

HTMLCollection

Eine HTMLCollection ist immer live. Es ist wie eine Gästeliste, die sich ständig aktualisiert.

let divs = document.getElementsByTagName('div'); // Gibt HTMLCollection zurück

NodeList

Eine NodeList kann live oder statisch sein, abhängig davon, wie sie erstellt wird.

let absätze = document.querySelectorAll('p'); // Gibt statische NodeList zurück
let childNodes = document.body.childNodes; // Gibt live NodeList zurück

Hier ist eine Tabelle, die ihre Unterschiede zusammenfasst:

Merkmal	HTMLCollection	NodeList
Live/Statisch	Immer live	Kann live oder statisch sein
Inhalt	Nur Elementknoten	Kann alle Knotentypen enthalten
Zugriff auf Elemente	Nach Name, ID oder Index	Nur nach Index
forEach-Methode	Nicht verfügbar	Verfügt

Schlussfolgerung

Und da haben wir es, Leute! Wir haben die Welt der DOM-Knotenlisten bereist, von den grundlegenden Konzepten bis hin zu den Feinheiten von live und statischen Listen. Denke daran, Übung macht den Meister. Versuche diese Beispiele aus, experimentiere damit, und bald wirst du Webseiten wie ein erfahrener Entwickler manipulieren können!

Bevor wir uns trennen, hier ist ein kleiner Web-Entwickler-Witz für dich: Warum hat der JavaScript-Entwickler Brille getragen? Weil er nicht C# konnte! (Verstanden? C Sharp? Na gut, ich mach mich aus dem Staub...)

Weiter codieren, weiter lernen und vor allem: Viel Spaß mit JavaScript!

Credits: Image by storyset