JavaScript - DOM Collections

Hallo da, ambitionierte Programmierer! Heute tauchen wir ein in die faszinierende Welt der DOM Collections in JavaScript. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie auf dieser Reise Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Also, holen Sie sich eine Tasse Kaffee (oder Ihr Lieblingsgetränk) und los geht's!

Das HTMLCollection-Objekt

Stellen Sie sich vor, Sie sind in einer Bibliothek und möchten alle Bücher über JavaScript finden. Die Bibliothekarin gibt Ihnen einen besonderen Wagen mit all diesen Büchern. In der Welt der Webentwicklung ist dieser Wagen wie eine HTMLCollection – eine Sammlung von HTML-Elementen, mit denen wir mithilfe von JavaScript arbeiten können.

Was ist eine HTMLCollection?

Eine HTMLCollection ist ein listenähnliches Objekt, das eine Sammlung von HTML-Elementen auf einer Webseite darstellt. Es ist "lebendig", das bedeutet, es aktualisiert sich automatisch, wenn das zugrunde liegende Dokument sich ändert.

Schauen wir uns ein einfaches Beispiel an:

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // Ausgabe: 3
</script>

In diesem Beispiel ist books eine HTMLCollection, die alle Elemente mit der Klasse "book" enthält. Das length-Property erzählt uns, wie viele Elemente in der Sammlung sind.

Zugriff auf Elemente in einer HTMLCollection

Sie können auf Elemente in einer HTMLCollection genauso zugreifen wie in einem Array:

console.log(books[0].innerText); // Ausgabe: "JavaScript Basics"
console.log(books[1].innerText); // Ausgabe: "Advanced JavaScript"
console.log(books[2].innerText); // Ausgabe: "DOM Manipulation"

Beachten Sie jedoch, dass eine HTMLCollection nicht genau ein Array ist. Es ist array-ähnlich, aber es hat nicht alle Methoden, die Arrays haben.

Durchlaufen einer HTMLCollection

Um alle Elemente in einer HTMLCollection zu durchlaufen, können Sie eine for-Schleife verwenden:

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

Oder, wenn Sie eine modernere Methode bevorzugen, können Sie die HTMLCollection in ein Array umwandeln und Array-Methoden verwenden:

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Sammlungen von Dokumenten-Objekten und DOM-Elementen

Nun, da wir HTMLCollection verstehen, erkunden wir einige gängige Möglichkeiten, Sammlungen von DOM-Elementen zu erstellen.

document.getElementsByTagName()

Diese Methode gibt eine HTMLCollection von Elementen mit dem angegebenen Tag-Namen zurück.

<p>Erster Absatz</p>
<p.Zweiter Absatz</p>
<p>Dritter Absatz</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Ausgabe: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

Wir haben das bereits gesehen, aber lassen Sie uns tiefer einsteigen:

<div class="fruit">Apfel</div>
<div class="fruit">Banane</div>
<div class="fruit">Orange</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // Ausgabe: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

Diese mächtige Methode gibt eine NodeList (die ähnlich einer HTMLCollection ist) aller Elemente zurück, die einem CSS-Selektor entsprechen:

<ul>
<li class="item">Element 1</li>
<li class="item">Element 2</li>
<li class="item">Element 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // Ausgabe: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

Beachten Sie, dass im Gegensatz zu HTMLCollection die NodeList, die von querySelectorAll() zurückgegeben wird, nicht lebendig ist und eine eingebettete forEach-Methode hat.

Vergleich der Sammlungsmethoden

Hier ist eine praktische Tabelle, die die von uns diskutierten Sammlungsmethoden zusammenfasst:

Methode	Rückgabewert	Lebendig?	Verwendungszweck
getElementsByTagName()	HTMLCollection	Ja	Wenn Sie Elemente eines bestimmten Tags benötigen
getElementsByClassName()	HTMLCollection	Ja	Wenn Sie Elemente mit einer bestimmten Klasse benötigen
querySelectorAll()	NodeList	Nein	Wenn Sie Elemente benötigen, die einem CSS-Selektor entsprechen

Erinnern Sie sich daran, "lebendig" bedeutet, die Sammlung aktualisiert sich automatisch, wenn das DOM sich ändert.

Schlussfolgerung

Und das war's, liebe Schüler! Wir haben die Welt der DOM Collections bereist, von HTMLCollection bis hin zu verschiedenen Methoden der DOM-Element-Sammlung. Diese Werkzeuge sind grundlegend, um Webseiten mit JavaScript zu manipulieren, und ermöglichen es Ihnen, Elemente mühelos auszuwählen und zu bearbeiten.

Während Sie diese Konzepte üben, werden Sie sich zunehmend mit der DOM-Manipulation wohler fühlen. Es ist wie das Erlernen eines Instruments – am Anfang mag es herausfordernd erscheinen, aber mit Übung werden Sie bald wunderschöne Web-Symphonien komponieren können!

Erinnern Sie sich daran, der Schlüssel zum Beherrschen der Programmierung ist Übung und Neugier. Scheuen Sie sich nicht, diese Methoden zu experimentieren, verschiedene Szenarien auszuprobieren und vor allem Spaß beim Coden zu haben!

Bis zum nächsten Mal, viel Spaß beim Programmieren!

Credits: Image by storyset