Complexe DOM element selectoren in JavaScript

Laten we iets complexers doen. Stel, we hebben bijvoorbeeld de volgende HTML code:

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

Laten we een referentie naar de input verkrijgen, die zich bevindt in het blok #parent:

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

Zoals je ziet, hebben we onze input verkregen met de selector #parent input. In werkelijkheid vallen onder deze CSS selector alle inputs die zich bevinden in #parent.

Stel, we hebben twee van zulke inputs:

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

Dan, als je de selector #parent input in de CSS code schrijft, zal het beide onze inputs beïnvloeden:

#parent input {
	color: red;
}

De methode querySelector werkt echter niet zo. Het verkrijgt altijd slechts één element - de eerste, die onder de opgegeven selector valt. Laten we kijken naar een voorbeeld. Stel we hebben inputs met de klasse elem:

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

Laten we de eerste van deze inputs verkrijgen:

let elem = document.querySelector('.elem');
console.log(elem); // hier zal de eerste input staan

De volgende HTML is gegeven:

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

Verkrijg een referentie naar de eerste alinea uit de div met id, gelijk aan block.

De volgende HTML is gegeven:

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

Verkrijg een referentie naar de eerste alinea uit de div met de klasse block.

De volgende HTML is gegeven:

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

Verkrijg een referentie naar de eerste alinea met de klasse www.