تشخیص تغییرات DOM با ناظران جهش

Paul Kinlan

در سال 2000، Mutation Events API مشخص شد تا توسعه دهندگان بتوانند به تغییرات یک DOM واکنش نشان دهند (مانند DOMNodeRemoved، DOMattrModified و غیره).

این ویژگی به طور گسترده توسط توسعه‌دهندگان وب مورد استفاده قرار نمی‌گرفت، اما اگر می‌خواستند هنگام تغییر چیزی در صفحه، اقدامی انجام دهند، یک مورد استفاده بسیار راحت و محبوب برای برنامه‌های افزودنی Chrome ارائه می‌داد.

رویدادهای جهش مفید هستند، اما در عین حال برخی از مشکلات عملکرد را ایجاد می کنند. رویدادها کند هستند و به طور مکرر به صورت همزمان اجرا می شوند، که باعث ایجاد برخی اشکالات ناخواسته مرورگر می شود.

DOM Mutation Observers که در مشخصات DOM4 معرفی شده است جایگزین رویدادهای جهش می شود. در حالی که رویدادهای جهش رویدادهای آهسته را برای هر تغییر ایجاد می‌کردند، مشاهده‌کنندگان جهش با استفاده از توابع پاسخ به تماس که می‌توانند پس از چندین تغییر در DOM ارائه شوند، سریع‌تر عمل می‌کنند.

می‌توانید فهرست تغییراتی را که API ارائه می‌دهد به صورت دستی مدیریت کنید یا از کتابخانه‌ای مانند Mutation Summary استفاده کنید که این کار را آسان‌تر می‌کند و لایه‌ای از قابلیت اطمینان در مورد تغییراتی که در DOM رخ داده است اضافه می‌کند.

می‌توانید از Mutation Observers در Chrome Beta برای شناسایی تغییرات در DOM استفاده کنید و آماده استفاده از آن در زمان ثبات (Chrome 18) باشید. اگر در حال حاضر از رویدادهای منسوخ شده جهش استفاده می کنید، فقط به مشاهده کنندگان جهش مهاجرت کنید.

در اینجا نمونه ای از فهرست کردن گره های درج شده با رویدادهای جهش آورده شده است:

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