วิธีใช้ MutationObserver API สำหรับการเปลี่ยนแปลงโหนด DOM

นี่คือสถานการณ์: Rita นักเขียนนิตยสารกำลังแก้ไขบทความออนไลน์ของเธอ เธอบันทึกการเปลี่ยนแปลงของเธอและเห็นข้อความ “บันทึกการเปลี่ยนแปลงแล้ว!” ทันใดนั้นเธอสังเกตเห็นการพิมพ์ผิดที่เธอพลาด เธอแก้ไขได้และกำลังจะคลิก “ประหยัด”, เมื่อเธอได้รับโทรศัพท์จากหัวหน้าของเธอ.

หลังจากการโทรสิ้นสุดลงเธอหันกลับไปที่หน้าจอเห็น “บันทึกการเปลี่ยนแปลงแล้ว!” ปิดเครื่องคอมพิวเตอร์และพายุนอกสำนักงาน.

นอกเหนือจากความไม่เหมาะสมของฉันสำหรับการเล่าเรื่องเรายังสังเกตเห็นจากสถานการณ์สั้น ๆ ว่ามีปัญหาอะไรที่ข้อความถาวรก่อเกิดขึ้น ดังนั้นในอนาคตเราตัดสินใจที่จะหลีกเลี่ยงเมื่อเป็นไปได้และใช้สิ่งที่แจ้งให้ผู้ใช้รับทราบด้วยการคลิก - หรือ หายตัวไปเอง. การใช้ข้อความที่สองเพื่อส่งข้อความด่วนเป็นความคิดที่ดี.

เรารู้แล้วว่าจะทำให้องค์ประกอบหายไปจากหน้าเว็บได้อย่างไรจึงไม่เป็นปัญหา สิ่งที่เราต้องรู้คือ มันปรากฏขึ้นเมื่อใด? ดังนั้นเราสามารถทำให้มันหายไปหลังจากเวลาที่เหมาะสม.

MutationObserver API

โดยรวมเมื่อองค์ประกอบ DOM (เช่นข้อความ div) หรือการเปลี่ยนแปลงโหนดอื่น ๆ เราควรจะสามารถรู้ได้ เป็นเวลานานที่นักพัฒนาต้องพึ่งพาแฮ็กและเฟรมเวิร์กเนื่องจากไม่มี API ดั้งเดิม แต่นั่นก็เปลี่ยนไป.

ตอนนี้เรามี MutationObserver (เหตุการณ์การกลายพันธุ์ก่อนหน้านี้). MutationObserver เป็นวัตถุพื้นเมืองของ JavaScript ที่มีชุดคุณสมบัติและวิธีการ มันช่วยให้เรา สังเกตการเปลี่ยนแปลงบนโหนดใด ๆ เช่นองค์ประกอบ DOM, เอกสาร, ข้อความ ฯลฯ โดยการกลายพันธุ์เราหมายถึง การเพิ่มหรือลบโหนดและเปลี่ยนเป็นแอตทริบิวต์ & data ของโหนด.

มาดูตัวอย่างเพื่อความเข้าใจที่ดีขึ้น ก่อนอื่นเราจะสร้างที่ซึ่งข้อความจะปรากฏเมื่อคลิกปุ่มเช่นเดียวกับที่ริต้าเห็น จากนั้นเราจะ สร้างและเชื่อมโยงผู้สังเกตการกลายพันธุ์กับกล่องข้อความนั้น และ รหัสตรรกะเพื่อซ่อนข้อความโดยอัตโนมัติ. เข้าใจ?

บันทึก: ในบางครั้งคุณอาจถามฉันในหัวแล้ว “เหตุใดจึงไม่เพียงซ่อนข้อความจากภายในเหตุการณ์คลิกที่ปุ่มเองใน JavaScript?” ในตัวอย่างของฉันฉันไม่ได้ทำงานกับเซิร์ฟเวอร์ดังนั้นแน่นอนว่าลูกค้าต้องรับผิดชอบในการแสดงข้อความและสามารถซ่อนได้ง่ายเกินไป แต่เหมือนในเครื่องมือแก้ไขของ Rita หากเซิร์ฟเวอร์เป็นเซิร์ฟเวอร์ที่ตัดสินใจเปลี่ยนเนื้อหา DOM ลูกค้าจะสามารถตื่นตัวและรอได้.

อันดับแรกเราสร้างการตั้งค่าเพื่อแสดงข้อความเมื่อคลิกปุ่ม.

 แสดงข้อความ

var msg = document.querySelector ('# msg'), SUCCESSMSG = "การเปลี่ยนแปลงที่บันทึกไว้!"; / * เพิ่มปุ่มคลิกเหตุการณ์ * / document .querySelector ('ปุ่ม') .addEventListener ('คลิก', showMsg); ฟังก์ชั่น showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

เมื่อเราทำการตั้งค่าเริ่มต้นแล้วให้ทำสิ่งต่อไปนี้

• สร้าง MutationObserver วัตถุที่มีฟังก์ชั่นการโทรกลับที่ผู้ใช้กำหนด (ฟังก์ชั่นจะถูกกำหนดในภายหลังในโพสต์) ฟังก์ชั่นจะดำเนินการในทุกการกลายพันธุ์ที่สังเกตโดย MutationObserver.
• สร้างวัตถุปรับแต่งเพื่อระบุประเภทของการกลายพันธุ์ที่จะต้องปฏิบัติตาม MutationObserver.
• ผูก MutationObserver ไปยังเป้าหมายซึ่งเป็น 'msg' div ในตัวอย่างของเรา.

(ฟังก์ชั่น startObservation () var / * 1) สร้างวัตถุ MutationObserver * / observer = ใหม่ MutationObserver (ฟังก์ชัน (การกลายพันธุ์) mutationObserverCallback (การกลายพันธุ์);) / * 2) สร้างวัตถุ config * / config = childList: จริง; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

ด้านล่างเป็นรายการคุณสมบัติสำหรับ การตั้งค่า วัตถุที่ระบุการกลายพันธุ์ชนิดต่าง ๆ เนื่องจากในตัวอย่างของเราเราจัดการกับโหนดข้อความลูกที่สร้างขึ้นสำหรับข้อความเท่านั้นเราจึงใช้ childList คุณสมบัติ.

ชนิดของการกลายพันธุ์ที่สังเกตได้

ตอนนี้ฟังก์ชั่นการโทรกลับนั้นได้รับการดำเนินการในทุกการกลายพันธุ์ที่สังเกต.

ฟังก์ชั่น mutationObserverCallback (การกลายพันธุ์) / * คว้าการกลายพันธุ์ครั้งแรก * / var mutationRecord = การกลายพันธุ์ [0]; / * ถ้ามีเพิ่มโหนดชายด์ซ่อน msg หลังจาก 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

เนื่องจากเราเพิ่มข้อความไปยัง div, เราจะคว้าการกลายพันธุ์ครั้งแรกที่พบบนมันและตรวจสอบว่ามีการใส่โหนดข้อความหรือไม่ หากเราเกิดการเปลี่ยนแปลงมากกว่าหนึ่งครั้งเราก็สามารถวนรอบ การกลายพันธุ์ แถว.

การกลายพันธุ์ทุกครั้งใน การกลายพันธุ์ อาร์เรย์จะถูกแทนด้วยวัตถุ MutationRecord ด้วยคุณสมบัติดังต่อไปนี้.

คุณสมบัติของ MutationRecord

และ…แค่นั้นแหละ เราแค่ต้องใส่รหัสเข้าด้วยกันสำหรับขั้นตอนสุดท้าย.

รองรับเบราว์เซอร์

การอ้างอิง

• “W3C DOM4 สังเกตการณ์การกลายพันธุ์.” W3C เว็บ. 19 มิถุนายน 2558
• “MutationObserver.” Mozilla Developer Network เว็บ. 19 มิถุนายน 2558.