Selettori complessi di elementi DOM in JavaScript

Facciamo qualcosa di più complesso. Supponiamo, ad esempio, di avere questo codice HTML:

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

Otteniamo un riferimento all'input che si trova all'interno del blocco #parent:

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

Come puoi vedere, abbiamo ottenuto il nostro input tramite il selettore #parent input. In realtà, questo selettore CSS corrisponde a tutti gli input situati in #parent.

Supponiamo, ad esempio, di avere due input di questo tipo:

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

Allora, se scrivi il selettore #parent input nel codice CSS, interesserà entrambi i nostri input:

#parent input {
	color: red;
}

Tuttavia, il metodo querySelector non funziona così. Ottiene sempre solo un elemento - il primo che corrisponde al selettore specificato. Vediamo un esempio. Supponiamo di avere input con la classe elem:

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

Otteniamo il primo di questi input:

let elem = document.querySelector('.elem');
console.log(elem); // qui ci sarà il primo input

Dato il seguente HTML:

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

Ottieni un riferimento al primo paragrafo all'interno del div con id uguale a block.

Dato il seguente HTML:

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

Ottieni un riferimento al primo paragrafo all'interno del div con classe block.

Dato il seguente HTML:

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

Ottieni un riferimento al primo paragrafo con classe www.