Em 2000, a API Mutation Events foi especificada para facilitar a reação dos desenvolvedores a mudanças em um DOM (por exemplo, DOMNodeRemoved, DOMAttrModified etc.).
Esse recurso não era muito usado por desenvolvedores da Web, mas era um caso de uso muito conveniente e popular para extensões do Chrome quando elas queriam realizar alguma ação quando algo na página mudava.
Os eventos de mutação são úteis, mas, ao mesmo tempo, eles criam alguns problemas de desempenho. Os eventos são lentos e são acionados com muita frequência de forma síncrona, o que causa alguns bugs indesejados no navegador.
Introduzidos na especificação DOM4, os observadores de mutação do DOM vão substituir os eventos de mutação. Enquanto os eventos de mutação dispararam eventos lentos para cada mudança, os observadores de mutação são mais rápidos usando funções de callback que podem ser enviadas após várias mudanças no DOM.
É possível gerenciar manualmente a lista de alterações oferecidas pela API ou usar uma biblioteca como o Mutation Summary, que facilita essa tarefa e adiciona uma camada de confiabilidade sobre as mudanças que ocorreram no DOM.
Você pode começar a usar os Mutation Observers no Chrome Beta para detectar mudanças no DOM e estar pronto para usá-los quando eles estiverem estáveis (Chrome 18). Se você estiver usando os eventos de mutação descontinuados, migre para os observadores de mutação.
Confira um exemplo de como listar nós inseridos com eventos de mutação:
var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);
Confira como fica com os observadores de mutação:
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);