Сложни селектори DOM елемента у JavaScript-у

Хајде да урадимо нешто сложеније. Нека, на пример, имамо овакав 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>