ซีเล็กเตอร์ DOM ที่ซับซ้อนใน JavaScript

ลองมาทำอะไรที่ซับซ้อนขึ้นกันดีกว่า ยกตัวอย่างเช่น สมมติว่าเรามีโค้ด HTML ดังนี้:

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

ลองมาดูการอ้างอิงถึงอินพุตที่อยู่ ภายในบล็อก #parent:

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

อย่างที่คุณเห็น เราได้อินพุตของเราจากซีเล็กเตอร์ #parent input อันที่จริงแล้ว CSS selector นี้ จะครอบคลุมอินพุตทั้งหมดที่อยู่ใน #parent

ยกตัวอย่างเช่น สมมติว่าเรามีอินพุตสองอันแบบนี้:

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

เมื่อนั้น หากเขียนซีเล็กเตอร์ #parent input ในโค้ด CSS มันจะส่งผลต่ออินพุตทั้งสองอันของเรา:

#parent input {
	color: red;
}

อย่างไรก็ตาม เมธอด querySelector ทำงานไม่เหมือนกัน มันจะดึงมาเพียงหนึ่งเอลิเมนต์เท่านั้นเสมอ - ตัวแรกที่ตรงกับซีเล็กเตอร์ที่ระบุ ลองดูตัวอย่าง สมมติเรามี อินพุตที่มีคลาส elem:

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

ลองดึงอินพุตตัวแรกจากนี้:

let elem = document.querySelector('.elem');
console.log(elem); // จะได้อินพุตตัวแรกที่นี่

มี HTML ต่อไปนี้:

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

ให้ดึงการอ้างอิงไปยังย่อหน้าแรกจาก div ที่มี id เท่ากับ block

มี HTML ต่อไปนี้:

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

ให้ดึงการอ้างอิงไปยังย่อหน้าแรกจาก div ที่มี คลาส block

มี HTML ต่อไปนี้:

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

ให้ดึงการอ้างอิงไปยังย่อหน้าแรกที่มีคลาส www