Можно ли использовать селекторы jQuery с наблюдателями-мутациями DOM?

Ответ 1

Да, вы можете использовать селектора jQuery для данных, возвращаемых для обратных вызовов наблюдателей-мутаций.

См. этот jsFiddle.

Предположим, что у вас был HTML-код:

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

И вы устанавливаете наблюдателя, например:

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

Вы заметите, что мы можем jQuery на mutation.removedNodes.

Если вы запустите $(".myclass").html ("[censored!]"); с консоли, вы получите это из Chrome и Firefox:

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

который показывает, что вы можете использовать обычные методы выбора jQuery для возвращаемых наборов node.

Ответ 2

У меня нет персональных фрагментов кода для этого, но у меня есть три ресурса, которые могут помочь:

• Репозиторий Mutabor Github
• Статья + Утилита JQuery для мутаторов
• "jquery-mutation-summary" - расширение мутации-резюме (возможно, лучшее из этих трех)

Пример из библиотеки ссылок # 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");

Ответ 3

Я работал над очень похожей проблемой для Stack Exchange script, над которой я работаю, и мне нужно было контролировать DOM для изменений. Документы jQuery не имели ничего полезного, но я обнаружил, что событие DOMNodeInserted работает в 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();
        }
    }
});

Я не уверен на 100%, если это работает в Firefox, поскольку я еще не получил этого еще в процессе разработки. Надеюсь, это поможет!

Ответ 4

Я знаю, что это старый вопрос, но, возможно, это может помочь другим в поиске альтернативных решений. Недавно я узнал о Mutation Observers и хотел поэкспериментировать с их использованием вместе с jQuery. Я придумал два возможных подхода и превратил их в плагины. Код доступен здесь.

В первом подходе (jquery.observeWithEvents.js) используется функция jQuery trigger() для запуска события insertNode или removeNode, которое может быть связано с помощью функции jQuery on(). Второй подход (jquery.observeWithCallbacks.js) использует традиционные параметры обратного вызова. Пожалуйста, взгляните на README для примеров и использования.