Keerukad DOM elemendi selektorid JavaScriptis

Teeme midagi keerukamat. Oletame näiteks, et meil on selline HTML kood:

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

Hankige viide sisendväljale, mis asub ploki #parent sees:

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

Nagu näete, saime oma sisendvälja selektori abil #parent input. Tegelikult sobivad selle CSS selektoriga kõik sisendväljad, mis asuvad #parent sees.

Oletame näiteks, et meil on kaks sellist sisendvälja:

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

Siis, kui kirjutada CSS koodi selektor #parent input, mõjutab see mõlemat meie sisendvälja:

#parent input {
	color: red;
}

Meetod querySelector aga ei tööta nii. See hankib alati ainult ühe elemendi - esimese, mis sobib määratud selektoriga. Vaatame seda näite abil. Oletame, et meil on sisendväljad klassiga elem:

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

Hankige esimene neist sisendväljadest:

let elem = document.querySelector('.elem');
console.log(elem); // siin on esimene sisendväli

Antud on järgmine HTML:

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

Hankige viide esimesele lõigule divist, millel on id võrdne block-ga.

Antud on järgmine HTML:

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

Hankige viide esimesele lõigule divist, millel on klass block.

Antud on järgmine HTML:

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

Hankige viide esimesele lõigule klassiga www.