Seletores complexos de elementos DOM em JavaScript

Vamos fazer algo mais complexo. Suponha, por exemplo, que temos o seguinte código HTML:

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

Vamos obter uma referência ao input que está dentro do bloco #parent:

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

Como você pode ver, obtivemos nosso input pelo seletor #parent input. Na verdade, este seletor CSS seleciona todos os inputs que estão dentro de #parent.

Suponha, por exemplo, que temos dois desses inputs:

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

Então, se escrevermos o seletor #parent input no código CSS, ele afetará ambos os nossos inputs:

css#parent input {
  color: red;
}

O método querySelector, no entanto, funciona de maneira diferente. Ele sempre obtém apenas um elemento - o primeiro que corresponde ao seletor especificado. Vamos ver um exemplo. Suponha que temos inputs com a classe elem:

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

Vamos obter o primeiro desses inputs:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // aqui será o primeiro 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>