MutationObserver คือ JavaScript Browser API ที่สามารถใช้เพื่อตรวจจับการเปลี่ยนแปลงใน DOM เช่น การเพิ่มหรือการลบโหนด DOM และการเปลี่ยนแปลงในเนื้อหาข้อความ
วัตถุ MutationObserver
สามารถสังเกตโหนดย่อย คุณลักษณะ โหนดย่อยทั้งหมด หรือแผนผังย่อยด้านล่างโหนดที่ระบุได้ตั้งแต่หนึ่งรายการขึ้นไป
เราสามารถเข้าถึง API ได้โดยการสร้างอินสแตนซ์/วัตถุของคลาส MutationObserver
สำหรับตัวอย่าง:
const observer = new MutationObserver(callback);
callback
เป็นฟังก์ชันที่ถูกเรียกเมื่อมีการกลายพันธุ์เกิดขึ้นภายในชุดของโหนดที่ถูกสังเกต
ฟังก์ชัน callback
ใช้เป็นพารามิเตอร์อินพุตสองตัว:
- อาร์เรย์ของอ็อบเจ็กต์
MutationRecord
อธิบายการเปลี่ยนแปลงแต่ละรายการที่เกิดขึ้น และ MutationObserver
ซึ่งเรียกใช้callback
หากต้องการเริ่มสังเกตองค์ประกอบ DOM ที่เฉพาะเจาะจงให้ใช้วิธีการต่อไปนี้:
observer.observe(elementToObserve, configuration);
observer.observe
ใช้เป็นพารามิเตอร์อินพุตสองตัว:
- พารามิเตอร์แรกคือองค์ประกอบ DOM ที่ต้องดู (body, div) ฯลฯ
- พารามิเตอร์ที่สองคือ
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