Substituição de events de mutação DOM

Como a mutação do DOM é marcada como obsoleta pelo w3c (consulte http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents ), existe uma maneira alternativa (rápida) de detectar a modificação do atributo? no DOM?

Tanto quanto eu sei, não há alternativa (ainda), então você está preso com DOMAttrModified que só é suportado no Firefox e Opera. No IE, você tem o evento onpropertychanged , mas não há como obter uma funcionalidade semelhante no Chrome / Safari. Há várias coisas que você pode fazer dependendo do que você está tentando realizar e dos navegadores que você está segmentando:

  • definir getters e setters para os atributos que você deseja monitorar
  • replace methods como document.createAttribute , attributes.setNamedItem , …

Eu tenho trabalhado em uma solução cross-browser, mas sem muito sucesso. Você deve ficar longe de todos os events de mutação, já que eles não são cross-browser e muito lentos. Existem boas razões pelas quais eles estão obsoletos. Se você quer aprender mais leia isto:

A razão pela qual os events de mutação foram preteridos foi devido a enormes problemas de desempenho.

A substituição é de Observadores de Mutação , veja em http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers e https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

Informações sobre mutações são entregues aos observadores como uma sequência ordenada de MutationRecords, representando uma sequência observada de mudanças que ocorreram

Uso da amostra:

  var observer = new MutationObserver(function(mutationRecords) { // Handle mutations }); observer.observe(myNode, { // options: subtree: true, // observe the subtree rooted at myNode childList: true, // include information childNode insertion/removals attribute: true // include information about changes to attributes within the subtree }); 

Isso é suportado no Chrome 18 e no Firefox e no Webkit. O Firefox 14 também estará suportando esse recurso.

Um ótimo substituto para os events DOM * preteridos é o animationStart em conjunto com CSS Animations. David Walsh escreve sobre o método.

Primeiro, configure os keyframes e aplique-os aos elementos que você gostaria de ouvir ( não se esqueça dos prefixos do fornecedor! ):

 @keyframes nodeInserted { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } } #parentElement > li { animation-duration: 0.001s; animation-name: nodeInserted; } 

Em seguida, adicione o ouvinte:

 var insertListener = function(event){ if (event.animationName == "nodeInserted") { // This is the debug for knowing our listener worked! // event.target is the new node! console.warn("Another node has been inserted! ", event, event.target); } } document.addEventListener("animationstart", insertListener, false); // standard + firefox document.addEventListener("MSAnimationStart", insertListener, false); // IE document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari 

Ta-da! Aqui está a demo de David . Funciona muito bem para mim em uma extensão do Chrome que adiciona imagens do Facebook ao Google Voice (consulte content.css e injected.js).

Um ano depois , há os novos e shinys Mutation Observers do DOM Nível 4 (siga os links lá, eles explicam muito!). Onde um Mutation Event disparou mil vezes, o MutationObserver acionado apenas uma vez com todas as modificações contidas e acessíveis.

Trabalha para (a partir de 2017/03):

  • Firefox 14+
  • IE 11
  • Beira
  • Ópera 15+
  • Chrome 26+ (18 até 25, prefixo, window.WebKitMutationObserver )
  • Safari 6.0 (prefixado, window.WebKitMutationObserver )