DOM элементінің күрделі селекторлары JavaScript-те

Келіңіздер, біраз күрделірек нәрсе жасайық. Мысалы, бізде мынадай HTML коды бар делік:

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

Келіңіздер, <#parent блогының ішіндегі input-қа сілтеме алайық:

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

Көріп отырғаныңыздай, біз input-ты <#parent input селекторы бойынша алдық. Шын мәнінде, бұл CSS селекторы <#parent ішінде орналасқан барлық input-тарға тиесілі болады.

Мысалы, бізде екі осындай input бар делік:

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

Онда егер <#parent input селекторын CSS кодында жазсақ, ол біздің екі input-ымызға да әсер етеді:

#parent input {
	color: red;
}

Алайда, <querySelector> әдісі басқаша жұмыс істейді. Ол әрқашан тек бір элементті - көрсетілген селекторға түскен біріншісін ғана алады. Мысалға қарайық. Бізде <elem класы бар input-тар бар делік:

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

Келіңіздер, осы input-тардың біріншісін алайық:

let elem = document.querySelector('.elem');
console.log(elem); // мұнда бірінші input болады

Мына HTML берілген:

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

<id-і <block>-ке тең div-тен бірінші абзацқа сілтеме алыңыз.

Мына HTML берілген:

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

<block> класы бар div-тен бірінші абзацқа сілтеме алыңыз.

Мына HTML берілген:

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

<www> класы бар бірінші абзацқа сілтеме алыңыз.