first - ¿Se pueden usar los selectores jQuery con los observadores de mutación DOM?

parent jquery

Question

HTML5 incluye un concepto de "observadores de mutación" para monitorear los cambios en el DOM del navegador.

La 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 está escribiendo código para interactuar con un sitio de terceros sobre el cual no tiene control, digamos con un script de Greasemonkey o un script de usuario de Google Chrome, debe inspeccionar el árbol de elementos pasados ​​para encontrar qué información es relevante para usted.

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 utilizar los selectores jQuery con los datos pasados ​​a las devoluciones de llamada del observador de mutación HTML5?

Answer 1

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. Los documentos de jQuery no tuvieron nada útil, pero descubrí 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 aún no he llegado tan lejos en el proceso de desarrollo. ¡Espero que esto ayude!

Answer 2

No tengo ningún fragmento de código personal para este, pero tengo tres recursos que pueden ser útiles:

• Repositorio Mutabor Github
• Artículo + JQuery Utility para mutadores
• "jquery-mutation-summary" - extensión del resumen de mutación (probablemente el mejor de estos tres)

Ejemplo de la biblioteca del enlace # 3 ''jquery-mutation-summary'':

// 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 3

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 trigger() jQuery para desencadenar un evento insertNode o removeNode que se puede vincular a través de la función jQuery''s on() . El segundo enfoque ( jquery.observeWithCallbacks.js ) usa parámetros de devolución de llamada tradicionales. Por favor, eche un vistazo al archivo README para ejemplos y uso.

Answer 4

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

Vea este jsFiddle.

Supongamos que tiene HTML así:

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

Y estableces 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") );
        }
    } );
}

Notará que podemos jQuery en mutation.removedNodes .

Si luego ejecuta $(".myclass").html ("[censored!]"); de la consola , obtendrás esto de Chrome y Firefox:

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

que muestra que puede usar métodos de selección de jQuery normales en los conjuntos de nodos devueltos.