Auswahl von Elementen innerhalb anderer festgelegter Bereiche
Wir kennen die komfortablen Möglichkeiten bei CSS Elemente innerhalb eines bestimmten Bereiches auszuwählen. Genau diesen Komfort wollen wir auch in JavaScript haben. Im folgenden Beispiel wollen wir nur auf Absätze innerhalb des Fußbereichs zugreifen. Dazu ergänzen wir unser bisheriges HTML-Beispiel um einen HTML-Fußbereich <footer> und dort ein <p> als Absatz.
<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>
<footer>
<p>Fußbereich</p>
</footer>
</body>
</html>
Wir wollen jetzt nur auf alle p im Fußbereich zugreifen können. Mit CSS ist diese Anweisung sehr einfach. Wir wählen den CSS-Typ-Selektor footer und p und es passt schon. Als Beispiel sieht das wie folgt in CSS aus:
footer p {
color: red;
}
Sprich im Bereich footer aller p – das sagt der Aufbau "footer LEERZEICHEN p".
Die gleichen Möglichkeiten zur Auswahl wollen wir natürlich auch unter JavaScript haben – Komfort ist doch etwas Schönes.
Das klappt über den querySelector – und hier können wir alle Kombinationen von ID, Klassen und Typ-Selektoren nutzen. In unserem obigen Beispiel würde es dann wie folgt aussehen:
console.log(document.querySelector("footer p"));
Und als Ergebnis erhalten wir:
<p>Fußbereich</p>
Hier ist jetzt jegliche Variationsmöglichkeit vorhanden. Oft werden wir mehrere Bereiche auf unserer Website haben, wie z.B. einen Bereich div mit dem Attribut „id“:
<div id="spalte1">
<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>
</div>
<footer>
<p>Fußbereich</p>
</footer>
Und hier können wir nun auf die Absätze p innerhalb des Bereiches mit der id="spalte1" zugreifen über:
console.log(document.querySelector("#spalte1 p"));
Wir bekommen als Ergebnis:
<p class="wichtig">Erster Absatz mit Text</p>
WICHTIG ist: wir bekommen über document.querySelector immer nur das erste Element zurück! In unserem obigen Beispiel haben wir ja 2 Absätze p, aber nur der erste wird zurückgeliefert. Wenn wir nun auf beide Absätze zugreifen wollen, gibt es die Anweisung querySelectorAll
querySelectorAll – alle Elemente der query
Wir wollen alle Elemente und nicht nur das aller erste Element auswählen. Bei unserem obigen Beispiel ändern wir nur die Anweisung querySelector in querySelectorAll ab.
<script>
window.addEventListener("load", function() {
console.log(document.querySelectorAll("#spalte1 p"));
}, false );
</script>
<body>
<div id="spalte1">
<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>
</div>
<footer>
<p>Fußbereich</p>
</footer>
Und als Ergebnis haben wir nun alle Elemente im Zugriff:
NodeList(2) [p.wichtig, p]
Nun haben wir verschiedene Möglichkeiten kennen gelernt, um Elemente präzise auszuwählen. Jetzt wollen wir mit dieser Auswahl auch irgendetwas anstellen – z.B. diese durch Anklicken einfärben.
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
-
