Složeni selektori DOM elementa u JavaScript-u

Hajde da uradimo nešto složenije. Recimo, na primer, da imamo ovakav HTML kod:

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

Hajde da dobijemo referencu na input, koji se nalazi unutar bloka #parent:

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

Kao što vidite, dobili smo naš input preko selektora #parent input. Zapravo, pod ovaj CSS selektor spadaju svi inputi, koji se nalaze u #parent.

Recimo, na primer, da imamo dva takva inputa:

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

Tada, ako napišemo selektor #parent input u CSS kodu, on će uticati na oba naša inputa:

#parent input {
	color: red;
}

Metod querySelector, međutim, radi drugačije. On uvek dobija samo jedan element - prvi, koji zadovolji navedeni selektor. Hajde da pogledamo na primeru. Recimo da imamo inpute sa klasom elem:

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

Hajde da dobijemo prvi od ovih inputa:

let elem = document.querySelector('.elem');
console.log(elem); // ovde će biti prvi input

Dat je sledeći HTML:

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

Dobijte referencu na prvi pasus iz div-a sa id, jednakim block.

Dat je sledeći HTML:

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

Dobijte referencu na prvi pasus iz div-a sa klasom block.

Dat je sledeći HTML:

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

Dobijte referencu na prvi pasus sa klasom www.