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

Paul Kinlan

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

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

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

DOM Mutation Observers (משגיחי מוטציות ב-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);