JavaScript да DOM элементнинг мураккаб селекторлари

Келинг, яна бир мураккаброқ иш килайлик. Масалан, бизда куйидаги HTML коди бор дейлик:

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

Келинг, #parent блокаси ичида жойлашган инпутга ҳавола оламиз:

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

Кўриб турганингиздек, биз инпутни #parent input селектори орқали олдик. Аслида, бу CSS селектори #parent ичида жойлашган барча инпутларни ўз ичига олади.

Масалан, бизда иккита шундай инпут бор дейлик:

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

У ҳолда, агар CSS кодида #parent input селекторини ёзсак, у бизнинг иккала инпутга таъсир килади:

#parent input {
	color: red;
}

Аммо querySelector усули бундай ишламайди. У ҳар доим фақат битта элементни олади - кўрсатилган селекторга тушган биринчи элементни. Келинг, мисолда кўрамиз. Бизда elem синифига эга инпутлар бор дейлик:

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

Келинг, ушбу инпутларнинг биринчисini оламиз:

let elem = document.querySelector('.elem');
console.log(elem); // бу ерда биринчи инпут булади

Куйидаги HTML берилган:

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

id си block га тенг булган дивдан биринчи абзацга ҳавола олинг.

Куйидаги HTML берилган:

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

block синифли дивдан биринчи абзацга ҳавола олинг.

Куйидаги HTML берилган:

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

www синифли биринчи абзацга ҳавола олинг.