Selectores complejos de elementos DOM en JavaScript

Hagamos algo más complejo. Supongamos, por ejemplo, que tenemos el siguiente código HTML:

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

Obtengamos una referencia al input que se encuentra dentro del bloque #parent:

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

Como puedes ver, obtuvimos nuestro input mediante el selector #parent input. En realidad, este selector CSS selecciona todos los inputs que se encuentren en #parent.

Supongamos, por ejemplo, que tenemos dos de estos inputs:

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

Entonces, si escribimos el selector #parent input en el código CSS, afectará a ambos inputs:

#parent input {
	color: red;
}

Sin embargo, el método querySelector no funciona así. Siempre obtiene solo un elemento - el primero que coincida con el selector especificado. Veamos un ejemplo. Supongamos que tenemos inputs con la clase elem:

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

Obtengamos el primero de estos inputs:

let elem = document.querySelector('.elem');
console.log(elem); // aquí estará el primer input

Dado el siguiente HTML:

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

Obtenga una referencia al primer párrafo dentro del div con id igual a block.

Dado el siguiente HTML:

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

Obtenga una referencia al primer párrafo dentro del div con clase block.

Dado el siguiente HTML:

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

Obtenga una referencia al primer párrafo con clase www.