На додаток до "сировинних" інструментів, наданих MutationObserver
API , існують "зручні" бібліотеки для роботи з мутаціями DOM.
Поміркуйте: MutationObserver представляє кожну зміну DOM в термінах підрядів. Отже, якщо ви, наприклад, чекаєте, коли певний елемент буде вставлений, він може опинитися в глибині дітей mutations.mutation[i].addedNodes[j]
.
Ще одна проблема - коли ваш власний код, реагуючи на мутації, змінює DOM - ви часто хочете його відфільтрувати.
Гарною бібліотекою зручностей, яка вирішує подібні проблеми, є mutation-summary
(відмова від відповідальності: я не автор, просто задоволений користувач), яка дає змогу вказати запити того, що вас цікавить, і отримати саме це.
Основний приклад використання з документів:
var observer = new MutationSummary({
callback: updateWidgets,
queries: [{
element: '[data-widget]'
}]
});
function updateWidgets(summaries) {
var widgetSummary = summaries[0];
widgetSummary.added.forEach(buildNewWidget);
widgetSummary.removed.forEach(cleanupExistingWidget);
}
([{}])
ввійшов до консолі, який показує очікуване,MutationRecord
коли я натискаю на неї. Перевірте ще раз, оскільки це могло бути тимчасовою технічною несправністю в JSFiddle. Я ще не тестував його в IE, оскільки у мене немає IE 10, який наразі є єдиною версією, яка підтримує мутаційні події.