querySelector() / querySelectorAll():
Auswahl von Elementen innerhalb anderer festgelegter Bereiche
Wir kennen die komfortablen Möglichkeiten, bei CSS Elementen 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 auf alle <p> nur 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 alle 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 mit <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 allererste 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 kennengelernt, um Elemente präzise auszuwählen. Jetzt wollen wir mit dieser Auswahl auch irgendetwas anstellen – z.B. diese durch Anklicken einfärben.