Selectoare DOM complexe în JavaScript

Să facem ceva mai complex. Să presupunem, de exemplu, că avem următorul cod HTML:

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

Să obținem o referință la input-ul care se află în interiorul blocului #parent:

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

După cum vedeți, am obținut input-ul nostru prin selectorul #parent input. De fapt, acest selector CSS se potrivește cu toate input-urile care se află în #parent.

Să presupunem, de exemplu, că avem două astfel de input-uri:

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

Atunci, dacă scriem selectorul #parent input în codul CSS, acesta va afecta ambele input-uri ale noastre:

css#parent input {
  color: red;
}

Metoda querySelector, însă, nu funcționează așa. Ea întotdeauna obține doar un element - primul care se potrivește cu selectorul specificat. Să vedem un exemplu. Să presupunem că avem input-uri cu clasa elem:

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

Să obținem primul dintre aceste input-uri:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // aici va fi primul 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>