Komplekse DOM-elementselektorer i JavaScript

Lad os gøre noget mere komplekst. Lad os for eksempel have følgende HTML-kode:

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

Lad os få en reference til inputfeltet, som befinder sig inde i blokken #parent:

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

Som du kan se, fik vi vores inputfelt ved hjælp af selektoren #parent input. Faktisk matcher denne CSS-selektor alle inputfelter, der befinder sig i #parent.

Lad os for eksempel sige, at vi har to sådanne inputfelter:

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

Så, hvis du skriver selektoren #parent input i CSS-koden, vil den påvirke begge vores inputfelter:

#parent input {
	color: red;
}

Metoden querySelector fungerer dog ikke på samme måde. Den henter altid kun ét element - det første, der matcher den angivne selektor. Lad os se på et eksempel. Lad os sige, at vi har inputfelter med klassen elem:

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

Lad os hente det første af disse inputfelter:

let elem = document.querySelector('.elem');
console.log(elem); // her vil det første inputfelt være

Følgende HTML er givet:

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

Få en reference til det første afsnit i div'en med id lig med block.

Følgende HTML er givet:

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

Få en reference til det første afsnit i div'en med klassen block.

Følgende HTML er givet:

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

Få en reference til det første afsnit med klassen www.