Složité selektory DOM elementu v JavaScriptu

Pojďme udělat něco složitějšího. Nechť máme například takový HTML kód:

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

Získejme odkaz na input, který se nachází uvnitř bloku #parent:

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

Jak vidíte, získali jsme náš input pomocí selektoru #parent input. Ve skutečnosti tento CSS selektor odpovídá všem inputům, které se nacházejí v #parent.

Předpokládejme, že máme dva takové inputy:

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

Pak, pokud napíšete selektor #parent input v CSS kódu, ovlivní oba naše inputy:

#parent input {
	color: red;
}

Metoda querySelector však funguje jinak. Vždy získá pouze jeden prvek - první, který odpovídá zadanému selektoru. Podívejme se na příklad. Předpokládejme, že máme inputy s třídou elem:

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

Získejme první z těchto inputů:

let elem = document.querySelector('.elem');
console.log(elem); // zde bude první input

Je dáno následující HTML:

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

Získejte odkaz na první odstavec z divu s id rovným block.

Je dáno následující HTML:

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

Získejte odkaz na první odstavec z divu s třídou block.

Je dáno následující HTML:

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

Získejte odkaz na první odstavec s třídou www.