Sélecteurs DOM complexes d'un élément en JavaScript

Faisons quelque chose de plus complexe. Imaginons, par exemple, que nous ayons le code HTML suivant :

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

Obtenons une référence à l'input situé à l'intérieur du bloc #parent :

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

Comme vous le voyez, nous avons obtenu notre input par le sélecteur #parent input. En réalité, ce sélecteur CSS cible tous les inputs situés dans #parent.

Imaginons, par exemple, que nous ayons deux de ces inputs :

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

Alors, si on écrit le sélecteur #parent input dans le code CSS, il affectera nos deux inputs :

#parent input {
	color: red;
}

La méthode querySelector, cependant, fonctionne différemment. Elle ne récupère toujours qu'un seul élément - le premier qui correspond au sélecteur spécifié. Regardons un exemple. Imaginons que nous ayons des inputs avec la classe elem :

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

Obtenons le premier de ces inputs :

let elem = document.querySelector('.elem');
console.log(elem); // ici sera le premier input

Voici le HTML suivant :

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

Obtenez une référence au premier paragraphe du div avec l'id égal à block.

Voici le HTML suivant :

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

Obtenez une référence au premier paragraphe du div avec la classe block.

Voici le HTML suivant :

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

Obtenez une référence au premier paragraphe avec la classe www.