Złożone selektory elementu DOM w JavaScript

Zróbmy coś bardziej skomplikowanego. Załóżmy na przykład, że mamy taki kod HTML:

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

Pobierzmy referencję do inputa znajdującego się wewnątrz bloku #parent:

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

Jak widzisz, otrzymaliśmy nasz input za pomocą selektora #parent input. W rzeczywistości ten selektor CSS pasuje do wszystkich inputów znajdujących się w #parent.

Załóżmy na przykład, że mamy dwa takie inputy:

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

Wtedy, jeśli napiszesz selektor #parent input w kodzie CSS, wpłynie on na oba nasze inputy:

#parent input {
	color: red;
}

Metoda querySelector jednak działa inaczej. Zawsze pobiera tylko jeden element - pierwszy, który pasuje do podanego selektora. Spójrzmy na przykład. Załóżmy, że mamy inputy z klasą elem:

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

Pobierzmy pierwszy z tych inputów:

let elem = document.querySelector('.elem');
console.log(elem); // tutaj będzie pierwszy input

Dany jest następujący HTML:

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

Uzyskaj referencję do pierwszego akapitu w divie z id równym block.

Dany jest następujący HTML:

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

Uzyskaj referencję do pierwszego akapitu w divie z klasą block.

Dany jest następujący HTML:

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

Uzyskaj referencję do pierwszego akapitu z klasą www.