DOM elementinin mürəkkəb selektorları JavaScript-də

Gəlin daha mürəkkəb bir şey edək. Məsələn, tutaq ki, bizim belə bir HTML kodumuz var:

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

Gəlin #parent blokunun içərisindəki input elementin istinadını əldə edək:

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

Gördüyünüz kimi, biz input elementimizi selektor #parent input ilə əldə etdik. Əslində bu CSS sektoru #parent içərisindəki bütün input elementləri seçir.

Məsələn, tutaq ki, bizim iki belə input elementimiz var:

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

O zaman, əgər CSS kodunda #parent input selektorunu yazsaq, o, hər iki input elementimizə təsir edəcək:

css#parent input {
  color: red;
}

Lakin, querySelector metodu belə işləmir. O, həmişə yalnız bir elementi - göstərilən sektora uyğun gələn ilk elementi qaytarır. Gəlin buna bir nümunə ilə baxaq. Tutaq ki, bizim elem sinifli input elementlərimiz var:

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

Gəlin bu input elementlərindən birincisini əldə edək:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // burada birinci input olacaq

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>