Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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 kennen gelernt. 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 "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 zur Kontrolle in der Konsole uns 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 2 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, dass 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.