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>

Анда, эгерде #parent input селекторун CSS кодунда жазсак, ал биздин эки инпутту да таасирлейт:

#parent input {
	color: red;
}

Бирок, querySelector методу андай иштейт эмес. Ал ар дайым бир гана элементти - көрсөтүлгөн селекторго туура келген биринчи элементти гана алат. Келгиле, мисалды карап көрөлү. Бизде elem классы бар инпуттар бар болсун:

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

Келгиле, бул инпуттардын биринчисин алалы:

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 классы бар биринчи абзацтын шилтемесин алыңыз.