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