Дар JavaScript селекторҳои мураккаби унсури DOM

Биёед чизеро мураккабтар созем. Масалан, бигзор мо рамзи HTML-и зеринро дошта бошем:

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

Биёед истинод ба input-ро, ки дар дохили блоки #parent ҷойгир аст, ба даст орем:

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

Тавре ки мебинед, мо input-и худро бо селектори #parent input ба даст овардем. Дар асл, ин селектори CSS ҳамаи input-ҳоеро, ки дар дохили #parent ҷойгиранд, гирифтааст.

Бигзор, масалан, мо дуто ин гуна input дорем:

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

Пас, агар селектори #parent input-ро дар рамзи CSS нависед, он ҳардуи input-ҳои моро дар бар хоҳад гирифт:

#parent input {
	color: red;
}

Аммо, усули querySelector чунин кор намекунад. Он ҳамеша фақат як унсурро – аввалин унсуреро, ки ба селектори муайяншуда мувофиқат мекунад, мегирад. Биёед дар мисол дида бароем. Бигзор мо input-ҳое бо синфи elem дорем:

<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 аст, ба даст оред.

HTML-и зерин дода шудааст:

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

Истинод ба абзаци аввалро аз диве, ки синфаш block аст, ба даст оред.

HTML-и зерин дода шудааст:

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

Истинод ба абзаци аввалро бо синфи www ба даст оред.