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

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

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

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

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

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

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

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

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

css#parent input {
  color: red;
}

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

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

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

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

Задание 1

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

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

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

Задание 2

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

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

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

Задание 3

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

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

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