Komplexe DOM-Element-Selektoren in JavaScript

Lassen Sie uns etwas Komplexeres machen. Nehmen wir zum Beispiel an, wir haben folgenden HTML-Code:

<div id="parent">
	<input>
</div>

Lassen Sie uns eine Referenz auf das Input-Element erhalten, das sich innerhalb des Blocks #parent befindet:

let elem = document.querySelector('#parent input');
console.log(elem);

Wie Sie sehen, haben wir unser Input-Element mit dem Selektor #parent input erhalten. Tatsächlich fallen unter diesen CSS-Selektor alle Input-Elemente, die sich in #parent befinden.

Nehmen wir an, wir haben zwei solcher Input-Elemente:

<div id="parent">
	<input value="1">
	<input value="2">
</div>

Dann würde, wenn man den Selektor #parent input im CSS-Code schreibt, dieser beide unserer Input-Elemente betreffen:

#parent input {
	color: red;
}

Die Methode querySelector funktioniert jedoch anders. Sie erhält immer nur ein Element - das erste, das auf den angegebenen Selektor passt. Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben Input-Elemente mit der Klasse elem:

<input class="elem">
<input class="elem">

Lassen Sie uns das erste dieser Input-Elemente erhalten:

let elem = document.querySelector('.elem');
console.log(elem); // hier wird das erste Input-Element sein

Gegeben ist das folgende HTML:

<div id="block">
	<p>1</p>
	<p>2</p>
</div>

Erhalten Sie eine Referenz auf den ersten Absatz aus dem Div mit der id gleich block.

Gegeben ist das folgende HTML:

<div class="block">
	<p>1</p>
	<p>2</p>
</div>

Erhalten Sie eine Referenz auf den ersten Absatz aus dem Div mit der Klasse block.

Gegeben ist das folgende HTML:

<p class="www">text</p>
<p class="www">text</p>

Erhalten Sie eine Referenz auf den ersten Absatz mit der Klasse www.