การลบและแทนที่โหนด
ลบและแทนที่องค์ประกอบอย่างปลอดภัย
การลบและแทนที่โหนด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
นำโหนดออก
นอกจากการเพิ่มองค์ประกอบแล้ว คุณยังมักต้องลบหรือสลับองค์ประกอบด้วย เมธอด DOM สมัยใหม่ช่วยให้เขียนงานเหล่านี้ได้กระชับและอ่านง่าย
remove
remove ถอดองค์ประกอบออกจาก DOM โดยตรง โดยไม่ต้องมีการอ้างอิงไปยังองค์ประกอบแม่
const alert = document.querySelector(".alert");
alert.remove();removeChild
removeChild รุ่นเก่าจะเรียกใช้กับองค์ประกอบแม่และคืนค่าโหนดที่ถูกลบ ทำให้คุณนำโหนดนั้นกลับมาใช้ได้
const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);การลบหลายรายการ
หากต้องการลบโหนดลูกทั้งหมด ให้ทำซ้ำจนกว่าจะไม่เหลือโหนด หรือกำหนด innerHTML เป็นสตริงว่าง (ทำงานเร็ว แต่จะทิ้งการอ้างอิงต่าง ๆ)
while (list.firstChild) {
list.removeChild(list.firstChild);
}replaceWith
replaceWith สลับองค์ประกอบหนึ่งด้วยโหนดหรือสตริงใหม่อย่างน้อยหนึ่งรายการภายในการเรียกครั้งเดียว
const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);replaceWith กับหลายโหนด
replaceWith รับอาร์กิวเมนต์ได้หลายตัว คุณจึงแทนที่โหนดหนึ่งด้วยโหนดหลายโหนดได้
old.replaceWith(headerEl, bodyEl);replaceChild
replaceChild(newNode, oldNode) แบบดั้งเดิมจะเรียกใช้กับองค์ประกอบแม่ โปรดระวังลำดับอาร์กิวเมนต์: โหนดใหม่ก่อน แล้วจึงโหนดเก่า
list.replaceChild(newItem, oldItem);โหนดที่แยกออกยังคงอยู่
โหนดที่ถูกลบไม่ได้ถูกทำลาย หากคุณเก็บการอ้างอิงไว้ ก็สามารถแทรกโหนดนั้นกลับภายหลังได้ ซึ่งมีประโยชน์สำหรับรูปแบบการแสดงหรือซ่อน
const saved = panel;
panel.remove();
// later:
container.append(saved);replaceChildren
replaceChildren แทนที่โหนดลูก ทั้งหมด ขององค์ประกอบในครั้งเดียว หรือจะลบโหนดลูกทั้งหมดเมื่อเรียกใช้โดยไม่มีอาร์กิวเมนต์ก็ได้
list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren(); // remove everythingหน่วยความจำและตัวรับฟังเหตุการณ์
การลบองค์ประกอบจะทำให้ตัวรับฟังเหตุการณ์ขององค์ประกอบนั้นหยุดทำงานขณะที่องค์ประกอบถูกแยกออก หากคุณเพิ่มองค์ประกอบกลับเข้าไป ตัวรับฟังเหตุการณ์ที่ผูกไว้กับตัวองค์ประกอบเองจะยังคงอยู่
btn.addEventListener("click", handler);
btn.remove(); // handler will not fire while detached
container.append(btn); // handler works againการเลือกใช้เมธอด
ควรเลือกใช้ remove และ replaceWith สำหรับโค้ดสมัยใหม่ที่อ่านง่าย ใช้ removeChild/replaceChild เมื่อต้องการโหนดที่เมธอดคืนค่ากลับมา หรือต้องรองรับสภาพแวดล้อมรุ่นเก่ามาก
ตรวจสอบความเข้าใจ
ตรวจสอบลำดับอาร์กิวเมนต์
สรุปทบทวน
ลบโหนดด้วย remove แบบสมัยใหม่ หรือใช้ removeChild ที่เรียกผ่านองค์ประกอบแม่ สลับโหนดด้วย replaceWith (แบบสมัยใหม่และรับหลายอาร์กิวเมนต์) หรือ replaceChild(newNode, oldNode) ใช้ replaceChildren เพื่อรีเซ็ตโหนดลูกทั้งหมด โหนดที่แยกออกยังคงอยู่ในหน่วยความจำและสามารถแทรกกลับภายหลังได้
คำถามที่พบบ่อย
บทเรียน “การลบและแทนที่โหนด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การลบและแทนที่โหนด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การลบและแทนที่โหนด”
ลบและแทนที่องค์ประกอบอย่างปลอดภัย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การลบและแทนที่โหนด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปลี่ยนข้อความและเนื้อหา HTML
- การสร้างและแทรกองค์ประกอบ
- การแก้ไขแอตทริบิวต์และคลาส
- การลบและแทนที่โหนด