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

bind:this สำหรับการอ้างอิงองค์ประกอบ DOM

รับการอ้างอิงไปยังโหนด DOM เพื่อโต้ตอบกับองค์ประกอบโดยตรง

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

การรับการอ้างอิง DOM

ใช้ bind:this เพื่อรับการอ้างอิงไปยังองค์ประกอบ DOM ซึ่งคล้ายกับ useRef ใน React

ประกาศและผูก

ประกาศตัวแปร แล้วจึงผูกตัวแปรนั้น

<script>
  let inputEl;
</script>

<input bind:this={inputEl} />

พร้อมใช้งานหลังเมานต์

การอ้างอิงจะเป็นค่าว่างจนกว่าคอมโพเนนต์จะเมานต์ ให้ใช้ onMount เพื่อเข้าถึงอย่างปลอดภัย

<script>
  import { onMount } from "svelte";
  let inputEl;
  onMount(() => inputEl.focus());
</script>

เมธอดแบบสั่งการ

เรียกเมธอดของ DOM เช่น focus(), scrollIntoView() หรือเล่นสื่อ

function play() { audioEl.play(); }

การอ่านเค้าโครง

ใช้ getBoundingClientRect() เพื่อวัดขนาด หากเพิ่งเปลี่ยนแปลง ให้ครอบการเรียกไว้ใน tick()

การอ้างอิงคอมโพเนนต์

bind:this ใช้กับคอมโพเนนต์ Svelte ได้เช่นกัน ตัวแปรจะเก็บอินสแตนซ์ของคอมโพเนนต์

<MyComp bind:this={comp} />

การเรียกเมธอดของคอมโพเนนต์

เมธอดที่ส่งออกจากคอมโพเนนต์ผ่าน export function สามารถเรียกผ่านการอ้างอิงได้

องค์ประกอบหลายรายการ

สำหรับรายการ คุณอาจรวบรวมการอ้างอิงไว้ในอาร์เรย์ได้ แต่ควรพิจารณาใช้แอ็กชันแทน

กรณีที่ควรหลีกเลี่ยง

ควรใช้การผูกแบบประกาศและสถานะแบบตอบสนอง แทนการอ้างอิงแบบสั่งการเมื่อทำได้

การทำความสะอาด

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

ใช้ร่วมกับแอ็กชัน

สำหรับรูปแบบ DOM ที่เกิดซ้ำ ให้ห่อหุ้มไว้ในแอ็กชันของ Svelte แทนการใช้ bind:this

ตรวจสอบความเข้าใจ

คุณสามารถใช้องค์ประกอบที่ผูกไว้ได้เมื่อใด

สรุป

bind:this เปิดให้เข้าถึงการอ้างอิง DOM หรือคอมโพเนนต์ ซึ่งพร้อมใช้งานตั้งแต่ onMount เป็นต้นไปสำหรับการทำงานแบบสั่งการ

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

บทเรียน “bind:this สำหรับการอ้างอิงองค์ประกอบ DOM” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “bind:this สำหรับการอ้างอิงองค์ประกอบ DOM”

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

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

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

บทเรียน “bind:this สำหรับการอ้างอิงองค์ประกอบ DOM” ใช้เวลานานแค่ไหน

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

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

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

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

  1. bind:value สำหรับช่องป้อนข้อความ
  2. bind:checked สำหรับช่องทำเครื่องหมาย
  3. bind:group สำหรับกลุ่มปุ่มตัวเลือกและช่องทำเครื่องหมาย
  4. bind:this สำหรับการอ้างอิงองค์ประกอบ DOM
← กลับไปที่ Sveltejs Academy