Elemek keresése egy másik elemen belül JavaScriptben

Tegyük fel, hogy van egy szülő elemünk, és annak belsejében más elemek:

<div id="parent">
	<div class="child">text</div>
	<div class="child">text</div>
	<div class="child">text</div>
</div>

Tegyük fel, hogy a szülőre mutató hivatkozás már egy változóban van:

let parent = document.querySelector('#parent');

Ilyen esetben, ha szükséges, kereshetünk szelektor alapján ezen a szülőn belül, és nem a teljes dokumentumban. Ehhez a kereső metódust nem a document-re, hanem a szülőnket tartalmazó változóra kell alkalmazni.

Példaként keressük meg a szülőn belül a child osztállyal rendelkező elemeket:

let elems = parent.querySelectorAll('.child');

Adott egy #parent elem:

<div id="parent">
	<p class="www">text</p>
	<p class="www">text</p>
	<p class="www">text</p>
	<p class="ggg">text</p>
	<p class="ggg">text</p>
	<p class="ggg">text</p>
</div>

let parent = document.querySelector('#parent');

Keresse meg a szülőn belül a www osztályú elemeket és mentse el őket a elems1 változóba. Ezután keresse meg a szülőn belül a ggg osztályú elemeket és mentse el őket a elems2 változóba.