Selektorët kompleksë të elementit DOM në JavaScript

Le të bëjmë diçka më komplekse. Le të themi, për shembull, se kemi këtë kod HTML:

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

Le të marrim një referencë për input-in që ndodhet brenda bllokut #parent:

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

Siç mund ta shihni, ne morëm input-in tonë nga selektori #parent input. Në fakt, ky selektor CSS përfshin të gjitha input-et që ndodhen në #parent.

Le të themi, për shembull, se kemi dy input-e të tillë:

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

Atëherë, nëse shkruani selektorin #parent input në kodin CSS, ai do të prekë të dy input-et tona:

#parent input {
	color: red;
}

Sidoqoftë, metoda querySelector nuk funksionon në këtë mënyrë. Ajo gjithmonë merr vetëm një element - të parin që përshtatet me selektorin e specifikuar. Le ta shohim me një shembull. Le të themi se kemi input-e me klasën elem:

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

Le të marrim të parin nga këto input-e:

let elem = document.querySelector('.elem');
console.log(elem); // këtu do të jetë input-i i parë

Jepet HTML e mëposhtme:

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

Merrni një referencë për paragrafin e parë nga div me id të barabartë me block.

Jepet HTML e mëposhtme:

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

Merrni një referencë për paragrafin e parë nga div me klasën block.

Jepet HTML e mëposhtme:

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

Merrni një referencë për paragrafin e parë me klasën www.