Složeni selektori DOM elementa u JavaScript-u

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

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

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

javascriptlet 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:

html<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:

css#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:

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

Hajde da dobijemo prvi od ovih inputa:

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

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

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

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