Selectoare DOM complexe în JavaScript

Să facem ceva mai complex. Să presupunem, de exemplu, că avem următorul cod HTML:

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

Să obținem o referință la input-ul care se află în interiorul blocului #parent:

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

După cum vedeți, am obținut input-ul nostru prin selectorul #parent input. De fapt, acest selector CSS se potrivește cu toate input-urile care se află în #parent.

Să presupunem, de exemplu, că avem două astfel de input-uri:

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

Atunci, dacă scriem selectorul #parent input în codul CSS, acesta va afecta ambele input-uri ale noastre:

#parent input {
	color: red;
}

Metoda querySelector, însă, nu funcționează așa. Ea întotdeauna obține doar un element - primul care se potrivește cu selectorul specificat. Să vedem un exemplu. Să presupunem că avem input-uri cu clasa elem:

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

Să obținem primul dintre aceste input-uri:

let elem = document.querySelector('.elem');
console.log(elem); // aici va fi primul input

Este dat următorul HTML:

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

Obțineți o referință la primul paragraf din div-ul cu id egal cu block.

Este dat următorul HTML:

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

Obțineți o referință la primul paragraf din div-ul cu clasa block.

Este dat următorul HTML:

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

Obțineți o referință la primul paragraf cu clasa www.