זיהוי שינויים ב-DOM באמצעות משקיפי שינויים

Paul Kinlan

בשנת 2000, הוגדר Mutation Events API כדי לאפשר למפתחים להגיב בקלות לשינויים ב-DOM (למשל DOMNodeRemoved,‏ DOMAttrModified וכו').

מפתחי אינטרנט לא השתמשו בתכונה הזו באופן נרחב, אבל היא הייתה שימושית מאוד ופופולרית בתוספים ל-Chrome, אם הם רצו לבצע פעולה כלשהי כשמשהו בדף השתנה.

אירועי Mutation שימושיים, אבל הם גם יוצרים בעיות מסוימות בביצועים. האירועים איטיים והם מופעלים בתדירות גבוהה מדי באופן סינכרוני, מה שגורם לבאגים לא רצויים בדפדפן.

משגיחי המוטציות של DOM, שהוצגו במפרט DOM4, יחליפו את אירועי ה-Mutation. בעוד שאירועי Mutation מפעילים אירועים איטיים לכל שינוי בודד, אירועי Mutation Observer מהירים יותר באמצעות פונקציות קריאה חוזרת (callback) שאפשר לשלוח אחרי כמה שינויים ב-DOM.

אתם יכולים לטפל באופן ידני ברשימת השינויים שמציע ה-API, או להשתמש בספרייה כמו Mutation Summary שמקלה על המשימה הזו ומוסיפה שכבת אמינות לגבי השינויים שהתרחשו ב-DOM.

אתם יכולים להתחיל להשתמש ב-Mutation Observers ב-Chrome Beta כדי לזהות שינויים ב-DOM ולהיות מוכנים להשתמש בהם כשהתכונה תהיה יציבה (Chrome 18). אם אתם משתמשים כרגע באירועי Mutation שיצאו משימוש, פשוט צריך לעבור למעקב אחרי מוטציות.

דוגמה לרישום צמתים מוכנסים באמצעות אירועי מוטציה:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

כך זה נראה עם Mutation Observers:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);