Összetett DOM elem szelektorok JavaScriptben

Csináljunk valami összetettebbet. Tegyük fel például, hogy van egy ilyen HTML kódunk:

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

Kapjuk meg a #parent blokkban lévő inputra mutató hivatkozást:

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

Amint láthatod, megkaptuk az inputunkat a #parent input szelektorral. Valójában ez a CSS szelektor minden olyan inputra illeszkedik, amely a #parent -ban található.

Tegyük fel például, hogy két ilyen inputunk van:

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

Ekkor, ha a #parent input szelektort írjuk a CSS kódba, mindkét inputunkra hatással lesz:

#parent input {
	color: red;
}

A querySelector metódus azonban másképp működik. Mindig csak egy elemet ad vissza - az elsőt, amely megfelel a megadott szelektornak. Nézzük meg egy példán. Tegyük fel, hogy vannak elem osztállyal rendelkező inputjaink:

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

Kapjuk meg az első ilyen inputot:

let elem = document.querySelector('.elem');
console.log(elem); // itt az első input lesz

Adott a következő HTML:

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

Szerezd meg az első bekezdésre mutató hivatkozást a id -val rendelkező divből, amely egyenlő block -kal.

Adott a következő HTML:

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

Szerezd meg az első bekezdésre mutató hivatkozást a block osztályú divből.

Adott a következő HTML:

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

Szerezd meg az első www osztályú bekezdésre mutató hivatkozást.