Sudėtingi DOM elemento selektoriai JavaScript

Padarykime ką nors sudėtingesnio. Tarkime, pavyzdžiui, kad turime tokį HTML kodą:

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

Gaukime nuorodą į input'ą, esantį viduje bloko #parent:

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

Kaip matote, mes gavome savo input'ą pagal selektorių #parent input. Tiesą sakant, šis CSS selektorius atitinka visus input'us, esančius #parent viduje.

Tarkime, pavyzdžiui, kad turime du tokius input'us:

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

Tada, jei rašytume selektorių #parent input CSS kode, jis paveiktų abu mūsų input'us:

#parent input {
	color: red;
}

Metodas querySelector, tačiau, veikia ne taip. Jis visada gauna tik vieną elementą - pirmąjį, atitinkantį nurodytą selektorių. Pažiūrėkime pavyzdžiu. Tarkime, kad turime input'us su klase elem:

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

Gaukime pirmąjį iš šių input'ų:

let elem = document.querySelector('.elem');
console.log(elem); // čia bus pirmasis input'as

Duotas toks HTML:

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

Gaukite nuorodą į pirmąją pastraipą iš div'o su id, lygiu block.

Duotas toks HTML:

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

Gaukite nuorodą į pirmąją pastraipą iš div'o su klase block.

Duotas toks HTML:

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

Gaukite nuorodą į pirmąją pastraipą su klase www.