MutationObserver คือ JavaScript Browser API ที่สามารถใช้เพื่อตรวจจับการเปลี่ยนแปลงใน DOM เช่น การเพิ่มหรือการลบโหนด DOM และการเปลี่ยนแปลงในเนื้อหาข้อความ

วัตถุ MutationObserver สามารถสังเกตโหนดย่อย คุณลักษณะ โหนดย่อยทั้งหมด หรือแผนผังย่อยด้านล่างโหนดที่ระบุได้ตั้งแต่หนึ่งรายการขึ้นไป

เราสามารถเข้าถึง API ได้โดยการสร้างอินสแตนซ์/วัตถุของคลาส MutationObserver

สำหรับตัวอย่าง:

const observer = new MutationObserver(callback);

callback เป็นฟังก์ชันที่ถูกเรียกเมื่อมีการกลายพันธุ์เกิดขึ้นภายในชุดของโหนดที่ถูกสังเกต

ฟังก์ชัน callback ใช้เป็นพารามิเตอร์อินพุตสองตัว:

  1. อาร์เรย์ของอ็อบเจ็กต์ MutationRecord อธิบายการเปลี่ยนแปลงแต่ละรายการที่เกิดขึ้น และ
  2. MutationObserver ซึ่งเรียกใช้ callback

หากต้องการเริ่มสังเกตองค์ประกอบ DOM ที่เฉพาะเจาะจงให้ใช้วิธีการต่อไปนี้:

observer.observe(elementToObserve, configuration);

observer.observe ใช้เป็นพารามิเตอร์อินพุตสองตัว:

  1. พารามิเตอร์แรกคือองค์ประกอบ DOM ที่ต้องดู (body, div) ฯลฯ
  2. พารามิเตอร์ที่สองคือ object ที่จำเป็นในการกำหนดค่า API

วัตถุการกำหนดค่ามีคุณสมบัติดังต่อไปนี้:

const configuration = {
//childList : true - Set to true to detect node changes (deletion or addition of an HTML node)
childList : true,
//attributes:true - set to true to detect changes in the attribute of an HTML node
attributes:true,
//subtree:true - set to true to detect changes in sub children/subtree of the node being watched
subtree:true
}

ตัวอย่างการสาธิต:

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

✅และอย่าลืมสมัครรับจดหมายข่าวของฉันเพื่อเข้าถึงบทความในอนาคตของฉันได้ฟรีทันที

🔥การจัดการทางสังคม🔥

🔗ทวิตเตอร์: https://twitter.com/MTKTheOfficial