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

Paul Kinlan

בשנת 2000, ה-Mutation Event API צוין כדי להקל על המפתחים להגיב לשינויים ב-DOM (למשל DOMNodeRemoved , DOMAttrVariable וכו').

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

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

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

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

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

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

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

כך זה נראה עם 'צופים במוטציה':

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);