Seletores complexos de elementos DOM em JavaScript

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

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

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

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

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

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

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

Vamos obter o primeiro desses inputs:

let elem = document.querySelector('.elem');
console.log(elem); // aqui será o primeiro input

Dado o seguinte HTML:

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

Obtenha uma referência ao primeiro parágrafo dentro da div com id igual a block.

Dado o seguinte HTML:

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

Obtenha uma referência ao primeiro parágrafo dentro da div com a classe block.

Dado o seguinte HTML:

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

Obtenha uma referência ao primeiro parágrafo com a classe www.