Еще в 2000 году был разработан API событий мутации, позволяющий разработчикам легко реагировать на изменения в DOM (например, DOMNodeRemoved, DOMAttrModified и т. д.).
Эта функция не получила широкого распространения среди веб-разработчиков, но она представляла собой очень удобный и популярный вариант использования расширений Chrome, если требовалось выполнить какое-либо действие при изменении чего-либо на странице.
События мутации полезны, но в то же время они создают некоторые проблемы с производительностью. События медленные и они запускаются слишком часто и синхронно, что приводит к некоторым нежелательным ошибкам браузера.
Представленные в спецификации DOM4 , наблюдатели мутаций DOM заменят события мутаций. В то время как события мутаций запускали медленные события для каждого отдельного изменения, наблюдатели мутаций работают быстрее, используя функции обратного вызова, которые могут быть доставлены после нескольких изменений в DOM.
Вы можете вручную обрабатывать список изменений, предлагаемых API, или использовать библиотеку, например Mutation Summary , которая упрощает эту задачу и добавляет уровень надежности в отношении изменений, произошедших в DOM.
Вы можете начать использовать Mutation Observers в Chrome Beta для обнаружения изменений в DOM и быть готовыми использовать его, когда дело дойдет до стабильной версии (Chrome 18). Если вы в настоящее время используете устаревшие Mutation Events, просто перейдите на Mutation Observers.
Вот пример перечисления вставленных узлов с событиями мутации:
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);