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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
