Komplekse DOM-element-selektorer i JavaScript

La oss gjøre noe mer komplisert. La oss for eksempel si at vi har følgende HTML-kode:

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

La oss få en referanse til input-feltet som befinner seg inni blokken #parent:

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

Som du ser, fikk vi tak i input-feltet vårt ved hjelp av selektoren #parent input. Faktisk vil denne CSS-selektoren treffe alle input-felt som befinner seg inni #parent.

La oss si at vi har to slike input-felt:

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

Da, hvis vi skriver selektoren #parent input i CSS-koden, vil den påvirke begge input-feltene våre:

#parent input {
	color: red;
}

Metoden querySelector derimot fungerer ikke på samme måte. Den henter alltid bare ett element - det første som matcher den angitte selektoren. La oss se på et eksempel. La oss si at vi har input-felt med klassen elem:

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

La oss hente det første av disse input-feltene:

let elem = document.querySelector('.elem');
console.log(elem); // her vil det første input-feltet være

Følgende HTML er gitt:

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

Få en referanse til det første avsnittet i div-en med id lik block.

Følgende HTML er gitt:

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

Få en referanse til det første avsnittet i div-en med klassen block.

Følgende HTML er gitt:

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

Få en referanse til det første avsnittet med klassen www.