JavaScript에서 다른 요소 내부의 요소 검색하기

부모 요소가 있고, 그 내부에 다른 요소들이 있다고 가정해 봅시다:

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

부모에 대한 참조가 이미 변수에 저장되어 있다고 가정합니다:

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

이 경우 필요에 따라 전체 문서가 아닌 이 부모 요소 내부에서 선택자를 사용하여 검색을 수행할 수 있습니다. 이를 위해 검색 메서드를 document가 아닌 부모 요소를 포함하는 변수에 적용해야 합니다.

예를 들어 부모 요소 내부에서 child 클래스를 가진 요소들을 찾아봅시다:

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

요소 #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');

부모 요소 내부에서 www 클래스를 가진 요소들을 찾아 변수 elems1에 저장하세요. 그런 다음 부모 요소 내부에서 ggg 클래스를 가진 요소들을 찾아 변수 elems2에 저장하세요.