jQuery Academy · บทเรียน

เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ

เชี่ยวชาญเมธอดอย่าง .closest(), .siblings(), .find() และ .parentsUntil() เพื่อสำรวจโครงสร้าง DOM อย่างมีประสิทธิภาพและหลีกเลี่ยงคอขวดด้านประสิทธิภาพ

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

ท่องไปในโครงสร้าง DOM

ยินดีต้อนรับ! ในบทเรียนนี้ เราจะเรียนรู้เทคนิคที่มีประสิทธิภาพสำหรับการเคลื่อนที่ไปมาใน Document Object Model (DOM)

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

ท่องไป: เคลื่อนที่หรือเดินทางข้ามหรือผ่านโครงสร้าง
DOM: ตัวแทนโครงสร้าง HTML ของคุณภายในเบราว์เซอร์

ค้นหาองค์ประกอบลูกหลานด้วย .find()

เมธอด .find() เหมาะอย่างยิ่งสำหรับค้นหาองค์ประกอบลูกหลาน โดยจะค้นหา *ภายใน* องค์ประกอบที่เลือกอยู่ในปัจจุบัน เพื่อหาทุกรายการที่ตรงกัน

ลองนึกภาพว่าเป็นการค้นหาสิ่งของเฉพาะภายในกล่องที่กำหนด เมธอดนี้มีประโยชน์มากสำหรับจำกัดขอบเขตการค้นหาให้แคบลง

ไวยากรณ์: $(selector).find(filterSelector)
ส่งคืน: อ็อบเจ็กต์ jQuery ใหม่ที่มีองค์ประกอบลูกหลานที่ค้นพบ

.find() ในการใช้งานจริง

มาค้นหารายการทั้งหมด (<li>) ภายในรายการแบบไม่มีลำดับที่กำหนด (<ul>) กัน

ลองเรียกใช้โค้ด แล้วดูว่ารายการใดมีพื้นหลังสีเขียว!

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

ไล่ขึ้นด้วย .closest()

บางครั้งคุณจำเป็นต้องค้นหาองค์ประกอบบรรพบุรุษ (เช่น องค์ประกอบแม่ องค์ประกอบปู่ย่าตายาย และอื่น ๆ) ขององค์ประกอบหนึ่ง เมธอด .closest() ทำหน้าที่นี้โดยตรง

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

ไวยากรณ์: $(selector).closest(filterSelector)
ส่งคืน: อ็อบเจ็กต์ jQuery ที่มีบรรพบุรุษที่ใกล้ที่สุดเพียงหนึ่งรายการ

.closest() ในการใช้งานจริง

ลองนึกภาพว่าคุณคลิกปุ่มที่อยู่ลึกเข้าไปในโครงสร้างซ้อนกัน และต้องการค้นหาคอนเทนเนอร์หลักของปุ่มนั้น .closest() เหมาะสำหรับงานนี้

คลิกปุ่มด้านล่างเพื่อเน้นบรรพบุรุษ <div> ที่อยู่ใกล้ที่สุด

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

สำรวจองค์ประกอบพี่น้องด้วย .siblings()

องค์ประกอบที่อยู่ในระดับเดียวกันของโครงสร้าง DOM เรียกว่า 'องค์ประกอบพี่น้อง' เมธอด .siblings() ช่วยให้คุณเลือกองค์ประกอบเหล่านี้ทั้งหมดได้

เมธอดนี้ค้นหาองค์ประกอบทั้งหมดที่มีองค์ประกอบแม่เดียวกับองค์ประกอบปัจจุบัน โดย *ไม่รวม* องค์ประกอบปัจจุบันเอง

ไวยากรณ์: $(selector).siblings(filterSelector)
ส่งคืน: อ็อบเจ็กต์ jQuery ใหม่ที่มีองค์ประกอบพี่น้องทั้งหมด

.siblings() ในการใช้งานจริง

มาลองเน้นองค์ประกอบพี่น้องทั้งหมดของรายการที่กำหนดเมื่อคลิกที่รายการนั้นกัน วิธีนี้มีประโยชน์สำหรับรายการหรือเมนูแบบโต้ตอบ

คลิกรายการใดก็ได้เพื่อดูองค์ประกอบพี่น้องเปลี่ยนสี!

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

เดินทางขึ้นด้วย .parentsUntil()

ถ้าคุณต้องการเลือกบรรพบุรุษ *หลายรายการ* แต่ต้องการหยุดที่จุดหนึ่งโดยเฉพาะ จะใช้ .parentsUntil() ได้อย่างสะดวก

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

ไวยากรณ์: $(selector).parentsUntil(stopSelector, filterSelector)
ส่งคืน: อ็อบเจ็กต์ jQuery ที่มีบรรพบุรุษที่เลือกไว้

.parentsUntil() ในการใช้งานจริง

เรามีโครงสร้างที่ซ้อนกันลึก มาลองเลือกองค์ประกอบแม่ทั้งหมดของ <span> จนกว่าจะพบ <div class="container"> ที่กำหนด

เรียกใช้ตัวอย่างนี้เพื่อดูว่าองค์ประกอบใดมีเส้นขอบ แต่โปรดสังเกตว่า div 'container' เองจะถูกข้ามไป!

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

ตรวจสอบอย่างรวดเร็ว

คุณมีองค์ประกอบ <img> ซ้อนอยู่ภายใน <div class="gallery-item"> ซึ่งอยู่ภายใน <div class="gallery-row"> หากคุณเลือก <img> คุณจะใช้เมธอด jQuery ใดเพื่อเข้าถึง *เฉพาะ* <div class="gallery-item">?

สรุป: การท่องไปใน DOM อย่างมีประสิทธิภาพ

ทำได้ดีมาก! คุณเชี่ยวชาญเมธอดสำคัญของ jQuery สำหรับการท่องไปใน DOM อย่างมีประสิทธิภาพแล้ว:

.find(): ค้นหาองค์ประกอบลูกหลาน *ภายใน* องค์ประกอบ
.closest(): ค้นหา *บรรพบุรุษที่ใกล้ที่สุด* ซึ่งตรงกับตัวเลือก โดยเคลื่อนที่ *ขึ้น* ไปตามโครงสร้าง
.siblings(): เลือกองค์ประกอบทั้งหมดที่อยู่ใน *ระดับเดียวกัน* กับองค์ประกอบปัจจุบัน (ไม่รวมองค์ประกอบนั้นเอง)
.parentsUntil(): เลือกบรรพบุรุษหลายรายการ *จนถึง* องค์ประกอบที่ใช้หยุด (แต่ไม่รวมองค์ประกอบนั้น)

การใช้เมธอดเหล่านี้อย่างเหมาะสมช่วยให้คุณเขียนโค้ด jQuery สำหรับเว็บแอปพลิเคชันแบบไดนามิกได้แม่นยำ มีประสิทธิภาพ และอ่านง่ายยิ่งขึ้น!

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

บทเรียน “เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ”

เชี่ยวชาญเมธอดอย่าง .closest(), .siblings(), .find() และ .parentsUntil() เพื่อสำรวจโครงสร้าง DOM อย่างมีประสิทธิภาพและหลีกเลี่ยงคอขวดด้านประสิทธิภาพ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ” ใช้เวลานานแค่ไหน

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

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

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

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

ตัวเลือกแอตทริบิวต์ขั้นสูง
คลาสเทียมและตัวเลือกแบบกำหนดเอง
เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ

← กลับไปที่ jQuery Academy