¿Se pueden utilizar selectores jQuery con observadores de mutación DOM?

Question

HTML5 incluye un concepto de "mutation observers" para supervisar los cambios en el DOM del navegador.

Su devolución de llamada del observador recibirá datos que se parecen mucho a los fragmentos de árbol DOM. No sé si son exactamente esto o cómo funcionan realmente.

Pero cuando escribe código para interactuar con un sitio de terceros sobre el que no tiene control, digamos con un script de Greasemonkey o script de usuario de Google Chrome, debe inspeccionar el árbol de elementos pasados ​​para encontrar qué información es relevante para ti

Esto es mucho más simple con los selectores, al igual que trabajar con cualquier DOM, que caminar el árbol manualmente, especialmente para el código entre navegadores.

¿Hay alguna manera de usar los selectores jQuery con los datos pasados ​​a las devoluciones de llamada del observador de mutación HTML5?

Answer 1

Sí, puede usar los selectores jQuery en los datos devueltos a las devoluciones de llamada del observador de la mutación.

See this jsFiddle.

Supongamos que tenemos HTML así:

<span class="myclass"> 
    <span class="myclass2">My <span class="boldly">vastly</span> improved</span> 
    text. 
</span> 

y se establece un observador, así:

var targetNodes   = $(".myclass"); 
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 
var myObserver   = new MutationObserver (mutationHandler); 
var obsConfig   = { childList: true, characterData: true, attributes: true, subtree: true }; 

//--- Add a target node to the observer. Can only add one node at a time. 
targetNodes.each (function() { 
    myObserver.observe (this, obsConfig); 
}); 

function mutationHandler (mutationRecords) { 
    console.info ("mutationHandler:"); 

    mutationRecords.forEach (function (mutation) { 
     console.log (mutation.type); 

     if (typeof mutation.removedNodes == "object") { 
      var jq = $(mutation.removedNodes); 
      console.log (jq); 
      console.log (jq.is("span.myclass2")); 
      console.log (jq.find("span")); 
     } 
    }); 
} 

Se habrá dado cuenta de que podamos jQuery en el mutation.removedNodes.

---

Si a continuación, ejecuta desde la consola $(".myclass").html ("[censored!]"); obtendrá esto desde Chrome y Firefox:

mutationHandler: 
childList 
jQuery(<TextNode textContent="\n ">, span.myclass2, <TextNode textContent="\n text.\n ">) 
true 
jQuery(span.boldly) 

lo que demuestra que se puede utilizar métodos normales de selección de jQuery en los conjuntos de nodos devueltos.

Answer 2

Estaba trabajando en un problema muy similar para un script de Stack Exchange en el que estoy trabajando, y necesitaba poder controlar el DOM para ver los cambios. La documentación de jQuery no tenían nada útil, pero yo descubre que el evento DOMNodeInserted funciona en Chrome:

document.addEventListener("DOMNodeInserted", function(event){ 
    var element = event.target; 

    if (element.tagName == 'DIV') { 
     if (element.id == 'seContainerInbox') { 
      //alert($('#seContainerInbox').parent().get(0).tagName); 
      trimStoredItems(); 
      $('#seTabInbox').click(); 
      // var newCount = getNewCount(); 
      // if there are new inbox items, store them for later 
      storeNewInboxItems(); 
      applyNewStyleToItems(); 
     } 
    } 
}); 

no estoy 100% seguro de si esto funciona en Firefox ya que no he llegado tan lejos en el proceso de desarrollo. ¡Espero que esto ayude!

Answer 3

no tengo ningún fragmentos de código personal para éste, pero tengo tres recursos que pueden ayudar:

• Mutabor Github Repository
• Article + JQuery Utility for Mutators
• "jquery-mutation-summary" - extension of mutation-summary (probablemente el mejor de estos tres)

Ejemplo de enlace # 3 'jquery-mutación-resumen' biblioteca:

// Use document to listen to all events on the page (you might want to be more specific) 
var $observerSummaryRoot = $(document); 

// Simplest callback, just logging to the console 
function callback(summaries){ 
    console.log(summaries); 
} 

// Connect mutation-summary 
$observerSummaryRoot.mutationSummary("connect", callback, [{ all: true }]); 

// Do something to trigger mutationSummary 
$("<a />", { href: "http://joelpurra.github.com/jquery-mutation-summary"}).text("Go to the jquery-mutation-summary website").appendTo("body"); 

// Disconnect when done listening 
$observerSummaryRoot.mutationSummary("disconnect"); 

Answer 4

Sé que esta es una vieja pregunta, pero quizás esto puede ayudar a otros a buscar soluciones alternativas. Hace poco aprendí sobre Mutation Observers y quería experimentar con su uso junto con jQuery. Se me ocurrió dos enfoques posibles y los convertí en complementos. El código está disponible here.

El primer enfoque (jquery.observeWithEvents.js) utiliza la función de jQuery trigger() para activar ya sea un evento insertNode o removeNode que puede ser obligado a través de la función de jQuery on(). El segundo enfoque (jquery.observeWithCallbacks.js) utiliza parámetros de devolución de llamada tradicionales. Por favor, eche un vistazo al archivo README para ejemplos y uso.