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:

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

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

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

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

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

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

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

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

Aşağıdaki HTML verilmişdir:

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

id atributu block olan div-in içərisindəki birinci abzası əldə edin.

Aşağıdaki HTML verilmişdir:

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

block sinifli div-in içərisindəki birinci abzasın istinadını əldə edin.

Aşağıdaki HTML verilmişdir:

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

www sinifli birinci abzasın istinadını əldə edin.