Além das ferramentas "brutas" fornecidas pela MutationObserver
API , existem bibliotecas de "conveniência" para trabalhar com mutações do DOM.
Considere: MutationObserver representa cada alteração do DOM em termos de subárvores. Portanto, se você está, por exemplo, esperando que um determinado elemento seja inserido, ele pode estar dentro dos filhos de mutations.mutation[i].addedNodes[j]
.
Outro problema é quando seu próprio código, em reação a mutações, altera o DOM - você geralmente deseja filtrá-lo.
Uma boa biblioteca de conveniência que resolve esses problemas é mutation-summary
(exoneração de responsabilidade: não sou o autor, apenas um usuário satisfeito), que permite especificar consultas sobre o que lhe interessa e obter exatamente isso.
Exemplo de uso básico dos documentos:
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);
}
([{}])
logon no console, que mostra o esperadoMutationRecord
quando clico nele. Verifique novamente, pois pode ter sido uma falha técnica temporária no JSFiddle. Ainda não testei no IE, pois não tenho o IE 10, que atualmente é a única versão para suportar eventos de mutação.