Дар JavaScript селекторҳои мураккаби унсури DOM

Биёед чизеро мураккабтар созем. Масалан, бигзор мо рамзи HTML-и зеринро дошта бошем:

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

Биёед истинод ба input-ро, ки дар дохили блоки #parent ҷойгир аст, ба даст орем:

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

Тавре ки мебинед, мо input-и худро бо селектори #parent input ба даст овардем. Дар асл, ин селектори CSS ҳамаи input-ҳоеро, ки дар дохили #parent ҷойгиранд, гирифтааст.

Бигзор, масалан, мо дуто ин гуна input дорем:

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

Пас, агар селектори #parent input-ро дар рамзи CSS нависед, он ҳардуи input-ҳои моро дар бар хоҳад гирифт:

css#parent input {
  color: red;
}

Аммо, усули querySelector чунин кор намекунад. Он ҳамеша фақат як унсурро – аввалин унсуреро, ки ба селектори муайяншуда мувофиқат мекунад, мегирад. Биёед дар мисол дида бароем. Бигзор мо input-ҳое бо синфи elem дорем:

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

Биёед аввалин ин input-ҳоро ба даст орем:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // дар ин ҷо аввалин input хоҳад буд

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>