getElementsByClassName(): Auswahl von Elementen über JavaScript und Klassen
Wir wollen nun auf Elemente über JavaScript zugreifen, die einer bestimmten Gruppe, sprich Klasse, angehören.
Dazu müssen wir unseren HTML-Code über das Attribut class ergänzen. Die Nutzung von Klassen in HTML haben wir bereits bei der Nutzung von CSS für Design kennengelernt. Wichtig ist, dass man sich bei der Vergabe von Klassennamen (als Gedächtnisauffrischung des CSS-Kurs-Teils vom HTML-Seminar) an bestimmte Vorgaben hält:
- keine Sonderzeichen und Umlaute wie ö,ä, ü
- keine Leerzeichen
- keine Bindestriche
Wir vergeben in unserem Beispiel-HTML-Code nun die Klasse mit der Benennung wichtig, sowohl unserer Überschrift <h1>, wie auch dem ersten Absatz <p>.
<html>
<head>
<title>Seitentitel</title>
</head>
<script>
window.addEventListener("load", function() {
}, false );
</script>
<body>
<h1 class="wichtig">Überschrift 1</h1>
<p class="wichtig">Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
</body>
</html>
Nun können wir uns zur Kontrolle in der Konsole das Ergebnis der Anweisung getElementsByClassName() ausgeben lassen.
window.addEventListener("load", function() {
console.log(document.getElementsByClassName("wichtig"));
} );
Wieder werden wir ein Array zurückgeliefert bekommen, da es beliebig viele Elemente geben kann, die einer ausgewählten Klasse angehören.
In unserem Beispiel werden zwei zurückgeliefert – hier die Ausgabe der Konsole:
HTMLCollection(2) [h1.wichtig, p.wichtig]
Wir sehen, dass die Klasse „wichtig“ dem Element <h1> und einem <p> im HTML-Code zugeteilt wurden.
Direkt zugreifen können wir auf ein bestimmtes Element über den Index in eckigen Klammern. Im folgenden Beispiel greifen wir auf das erste Element unserer Auswahl zu:
console.log(document.getElementsByClassName("wichtig")[0]);
Als Rückgabe erhalten wir von unserem ersten Element, das in diesem Beispiel die Überschrift ist, den Inhalt:
<h1 class="wichtig">Überschrift 1</h1>
In der Regel wird man nicht mühevoll durch die Selektion einer ganzen Klasse von Elementen über getElementsByClassName nur ein Element herausfischen wollen, sondern man hat etwas mit der kompletten Klasse vor.
Und weil es so schön war, gehen wir noch einen Schritt weiter. Wir wollen nun Elemente auswählen, die innerhalb anderer Bereiche vorkommen. Das im folgenden Kapitel.