JavaScript да DOM элементнинг мураккаб селекторлари

Келинг, яна бир мураккаброқ иш килайлик. Масалан, бизда куйидаги HTML коди бор дейлик:

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

Келинг, #parent блокаси ичида жойлашган инпутга ҳавола оламиз:

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

Кўриб турганингиздек, биз инпутни #parent input селектори орқали олдик. Аслида, бу CSS селектори #parent ичида жойлашган барча инпутларни ўз ичига олади.

Масалан, бизда иккита шундай инпут бор дейлик:

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

У ҳолда, агар CSS кодида #parent input селекторини ёзсак, у бизнинг иккала инпутга таъсир килади:

css#parent input {
  color: red;
}

Аммо querySelector усули бундай ишламайди. У ҳар доим фақат битта элементни олади - кўрсатилган селекторга тушган биринчи элементни. Келинг, мисолда кўрамиз. Бизда elem синифига эга инпутлар бор дейлик:

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

Келинг, ушбу инпутларнинг биринчисini оламиз:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // бу ерда биринчи инпут булади

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>