Elementtien etsiminen toisen elementin sisällä JavaScriptissä

Oletetaan, että meillä on jokin vanhempielementti, ja sen sisällä muita elementtejä:

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

Oletetaan, että linkki vanhempaan on jo saatu muuttujaan:

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

Tällöin tarvittaessa voimme suorittaa haun valitsijan mukaan tämän vanhemman sisällä, eikä koko dokumentissa. Tätä varten etsintämetodi on sovellettava ei document:iin, vaan muuttujaan, joka sisältää vanhempamme.

Etsitään esimerkiksi vanhempamme sisällä elementit, joilla on luokka child:

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

Annettu elementti #parent:

<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');

Etsi vanhemman sisällä elementit, joilla on luokka www, ja kirjoita ne muuttujaan elems1. Etsi sitten vanhemman sisällä elementit, joilla on luokka ggg, ja kirjoita ne muuttujaan elems2.