Selectores complejos de elementos DOM en JavaScript

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

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

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

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

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

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

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

Obtengamos el primero de estos inputs:

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

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

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

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