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>

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

css#parent input {
  color: red;
}

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

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

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

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>