Komplexa DOM-elementväljare i JavaScript

Låt oss göra något mer komplext. Låt oss till exempel säga att vi har följande HTML-kod:

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

Låt oss få en referens till inputfältet som finns inuti blocket #parent:

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

Som du ser fick vi vårt inputfält med väljaren #parent input. Faktum är att denna CSS-väljare matchar alla inputfält som finns i #parent.

Låt oss säga att vi har två sådana inputfält:

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

Då, om man skriver väljaren #parent input i CSS-koden, kommer den att påverka båda våra inputfält:

#parent input {
	color: red;
}

Metoden querySelector fungerar dock inte på samma sätt. Den hämtar alltid bara ett element - det första som matchar den angivna väljaren. Låt oss titta på ett exempel. Låt oss säga att vi har inputfält med klassen elem:

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

Låt oss få den första av dessa inputfält:

let elem = document.querySelector('.elem');
console.log(elem); // här kommer det första inputfältet att vara

Följande HTML ges:

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

Skaffa en referens till det första stycket från div:en med id lika med block.

Följande HTML ges:

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

Skaffa en referens till det första stycket från div:en med klassen block.

Följande HTML ges:

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

Skaffa en referens till det första stycket med klassen www.