0Pricing
JavaScript Academy · บทเรียน

การไล่ดูพาเรนต์ ลูก และพี่น้อง

นำทางภายในโครงสร้างต้นไม้ DOM ระหว่างโหนดที่เกี่ยวข้องกัน

การไล่ดูพาเรนต์ ลูก และพี่น้อง เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ต้องสำรวจโครงสร้าง

เมื่อคุณมีองค์ประกอบหนึ่งรายการแล้ว คุณมักต้องเข้าถึงองค์ประกอบที่เกี่ยวข้อง เช่น คอนเทนเนอร์ที่ครอบอยู่ รายการภายใน หรือองค์ประกอบที่อยู่ถัดไปโดยตรง คุณสมบัติสำหรับสำรวจ DOM ช่วยให้คุณเคลื่อนที่ไปตามโครงสร้างต้นไม้

parentElement

parentElement ให้คุณเข้าถึงองค์ประกอบที่ครอบองค์ประกอบปัจจุบันอยู่ หรือส่งคืน null เมื่ออยู่บนสุดของโครงสร้างต้นไม้

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

children

children คือ HTMLCollection แบบเปลี่ยนแปลงตามข้อมูล ซึ่งประกอบด้วยองค์ประกอบลูกโดยตรงขององค์ประกอบนั้น โดยไม่รวมโหนดข้อความ

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild และ lastElementChild

คุณสมบัติเหล่านี้จะข้ามไปยังองค์ประกอบลูกตัวแรกหรือตัวสุดท้ายโดยตรง โดยข้ามโหนดข้อความหรือโหนดความคิดเห็น

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

nextElementSibling ส่งคืนองค์ประกอบที่อยู่ถัดจากองค์ประกอบปัจจุบันทันทีภายในองค์ประกอบแม่เดียวกัน

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

previousElementSibling เคลื่อนที่ไปในทิศทางตรงกันข้าม ทั้งสองอย่างส่งคืน null เมื่อไม่มีองค์ประกอบพี่น้อง

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

คุณสมบัติขององค์ประกอบเทียบกับโหนด

โปรดระวัง: childNodes, nextSibling และ parentNode รวมโหนดข้อความ เช่น ช่องว่างด้วย โดยทั่วไปคุณสมบัติรุ่นที่มี *Element* คือสิ่งที่คุณต้องการ

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

closest จะไล่ขึ้นไปด้านบนของโครงสร้างต้นไม้จากองค์ประกอบปัจจุบัน และส่งคืนบรรพบุรุษที่ใกล้ที่สุด หรือองค์ประกอบนั้นเอง หากตรงกับตัวเลือก

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

closest สำหรับการมอบหมายเหตุการณ์

closest เหมาะอย่างยิ่งเมื่อการคลิกเกิดขึ้นบนองค์ประกอบด้านใน แต่คุณต้องการคอนเทนเนอร์ด้านนอกที่เป็นผู้จัดการเหตุการณ์นั้น

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

matches ทดสอบว่าองค์ประกอบนั้นตรงตามตัวเลือกหรือไม่ โดยส่งคืนค่าบูลีน มีประโยชน์เมื่อใช้ร่วมกับการสำรวจโครงสร้าง

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

การรวมขั้นตอนการสำรวจ

คุณสามารถเชื่อมขั้นตอนการสำรวจเข้าด้วยกันเพื่อเคลื่อนที่ผ่านโครงสร้างที่ซับซ้อน เช่น จากปุ่มขึ้นไปยังแถวของปุ่ม แล้วเคลื่อนไปยังแถวถัดไป

const next = btn.closest("tr").nextElementSibling;

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เลือกคุณสมบัติที่ถูกต้อง

ทบทวน

คุณสามารถเคลื่อนที่ขึ้นด้วย parentElement และ closest เคลื่อนเข้าสู่องค์ประกอบลูกด้วย children, firstElementChild และ lastElementChild และเคลื่อนไปด้านข้างด้วย nextElementSibling และ previousElementSibling ควรเลือกใช้คุณสมบัติที่ทำงานกับองค์ประกอบเท่านั้น เพื่อข้ามโหนดข้อความที่เป็นช่องว่าง

คำถามที่พบบ่อย

บทเรียน “การไล่ดูพาเรนต์ ลูก และพี่น้อง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การไล่ดูพาเรนต์ ลูก และพี่น้อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การไล่ดูพาเรนต์ ลูก และพี่น้อง”

นำทางภายในโครงสร้างต้นไม้ DOM ระหว่างโหนดที่เกี่ยวข้องกัน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การไล่ดูพาเรนต์ ลูก และพี่น้อง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การเลือกองค์ประกอบด้วย querySelector
  2. getElementById และ getElementsByClassName
  3. การไล่ดูพาเรนต์ ลูก และพี่น้อง
  4. NodeList เทียบกับ HTMLCollection
← กลับไปที่ JavaScript Academy