Zložité selektory DOM prvku v JavaScripte

Urobme niečo zložitejšie. Nech máme napríklad takýto HTML kód:

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

Získajme odkaz na vstupné pole (input), ktoré sa nachádza vnútri bloku #parent:

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

Ako vidíte, získali sme naše vstupné pole podľa selektora #parent input. V skutočnosti tento CSS selektor zachytáva všetky vstupné polia, ktoré sa nachádzajú v #parent.

Predpokladajme, že máme dve takéto vstupné polia:

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

Potom, ak napíšeme selektor #parent input v CSS kóde, bude ovplyvňovať obe naše vstupné polia:

css#parent input {
  color: red;
}

Metóda querySelector však funguje inak. Vždy získa iba jeden prvok - prvý, ktorý spĺňa zadaný selektor. Pozrime sa na príklad. Predpokladajme, že máme vstupné polia s triedou elem:

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

Získajme prvé z týchto vstupných polí:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // tu bude prvé vstupné pole

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>