Zložité selektory DOM prvku v JavaScripte

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

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

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

let 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:

<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:

#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:

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

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

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

Daný je nasledujúci HTML:

<div id="block">
	<p>1</p>
	<p>2</p>
</div>

Získajte odkaz na prvý odsek z divu s id rovným block.

Daný je nasledujúci HTML:

<div class="block">
	<p>1</p>
	<p>2</p>
</div>

Získajte odkaz na prvý odsek z divu s triedou block.

Daný je nasledujúci HTML:

<p class="www">text</p>
<p class="www">text</p>

Získajte odkaz na prvý odsek s triedou www.