การค้นหาองค์ประกอบภายในองค์ประกอบอื่นใน 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