Zapleteni izbirniki DOM elementov v JavaScriptu

Naredimo nekaj bolj zapletenega. Recimo, da imamo na primer takšno HTML kodo:

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

Pridobimo povezavo do vnosnega polja, ki se nahaja znotraj bloka #parent:

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

Kot vidite, smo dobili naše vnosno polje z izbirnikom #parent input. Pravzaprav ta CSS izbirnik ustreza vsem vnosnim poljem, ki se nahajajo v #parent.

Recimo, da imamo dve takšni vnosni polji:

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

Če nato napišemo izbirnik #parent input v CSS kodi, bo vplival na obe naših vnosnih polji:

#parent input {
	color: red;
}

Vendar metoda querySelector ne deluje tako. Vedno pridobi le en element - prvega, ki ustreza navedenemu izbirniku. Poglejmo si na primeru. Recimo, da imamo vnosna polja z razredom elem:

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

Pridobimo prvo od teh vnosnih polj:

let elem = document.querySelector('.elem');
console.log(elem); // tukaj bo prvo vnosno polje

Podan je naslednji HTML:

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

Pridobite povezavo do prvega odstavka iz div z id, enakim block.

Podan je naslednji HTML:

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

Pridobite povezavo do prvega odstavka iz div z razredom block.

Podan je naslednji HTML:

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

Pridobite povezavo do prvega odstavka z razredom www.