Vichaguzi Ngumu vya Kipengele cha DOM katika JavaScript

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

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

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

javascriptlet 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:

html<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:

css#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:

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

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

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

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

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

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