Vichaguzi Ngumu vya Kipengele cha DOM katika JavaScript

Wacha tufanye kitu kigumu zaidi. Kwa mfano, hebu tuseme tuna msimbo wa HTML kama huu:

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

Wacha tupate kiungo kwenye kisanduku cha maingizo (input) kilichoko ndani ya kizuizi #parent:

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

Kama unavyoona, tulipata kisanduku chetu cha maingizo kwa kichaguzi #parent input. Kwa kweli, kichaguzi hiki cha CSS kinachukua visanduku vyote vya maingizio vilivyo ndani ya #parent.

Hebu tuseme tuna visanduku viwili kama hivi vya maingizo:

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

Basi, ikiwa utaandika kichaguzi #parent input katika msimbo wa CSS, kitashughulikia visanduku vyetu viwili vya maingizo:

#parent input {
	color: red;
}

Hata hivyo, njia querySelector haifanyi kazi hivyo. Huwa inapata kipengele kimoja tu - kile kwanza, kilicholingana na kichaguzi kilichobainishwa. Wacha tuangalie kwa mfano. Hebu tuseme tuna visanduku vya maingizo na darasa elem:

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

Wacha tupate kipengele cha kwanza kati ya visanduku hivi vya maingizo:

let elem = document.querySelector('.elem');
console.log(elem); // hapatikana kisanduku cha kwanza cha maingizo

Kuna HTML ifuatayo:

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

Pata kiungo kwenye aya ya kwanza kutoka kwenye div yenye id, sawa na block.

Kuna HTML ifuatayo:

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

Pata kiungo kwenye aya ya kwanza kutoka kwenye div yenye darasa block.

Kuna HTML ifuatayo:

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

Pata kiungo kwenye aya ya kwanza yenye darasa www.