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.

weitere eigene Projekte: