JavaScriptda DOM elementining murakkab selektorlari

Keling, biron narsani murakkabroq qilaylik. Misol uchun, bizda quyidagi HTML kodi bor deylik:

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

Keling, #parent blokining ichida joylashgan inputga havolani olaylik:

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

Ko'rib turganingizdek, biz inputimizni #parent input selektori orqali oldik. Aslida, ushbu CSS selektori #parent ichida joylashgan barcha inputlarga tegishli.

Misol uchun, bizda ikkita shunday input bor deylik:

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

Agar #parent input selektorini CSS kodida yozsak, u ikkala inputimizga ham ta'sir qiladi:

#parent input {
	color: red;
}

Biroq, querySelector metodi bunday ishlamaydi. U har doim faqat bitta elementni oladi - ko'rsatilgan selektorga mos keladigan birinchi elementni. Keling, buni misolda ko'rib chiqaylik. Bizda elem klassiga ega inputlar bor deylik:

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

Keling, ushbu inputlarning birinchisini olaylik:

let elem = document.querySelector('.elem');
console.log(elem); // bu yerda birinchi input bo'ladi

Quyidagi HTML berilgan:

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

id qiymati block ga teng bo'lgan divdan birinchi abzatsga havolani oling.

Quyidagi HTML berilgan:

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

block klassiga ega divdan birinchi abzatsga havolani oling.

Quyidagi HTML berilgan:

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

www klassiga ega birinchi abzatsga havolani oling.