49

HTML5には、ブラウザーのDOMへの変更を監視するための「ミューテーションオブザーバー」の概念が含まれています。

オブザーバーコールバックには、DOMツリースニペットによく似たデータが渡されます。それらが正確にこれであるかどうか、またはそれらが実際にどのように機能するかはわかりません。

ただし、GreasemonkeyスクリプトやGoogle Chromeユーザースクリプトなど、制御できないサードパーティのサイトとやり取りするコードを記述している場合は、渡された要素のツリーを調べて、自分に関連する情報を見つける必要があります。

これは、特にクロスブラウザーコードの場合、ツリーを手動でウォークするよりも、他のDOMを操作するのと同じように、セレクターを使用する方がはるかに簡単です。

HTML5ミューテーションオブザーバーコールバックに渡されるデータでjQueryセレクターを使用する方法はありますか？

4

4 に答える 4

66

はい、ミューテーションオブザーバーコールバックに返されるデータに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選択メソッドを使用できることを示しています。

于 2012-09-26T08:02:39.080 に答える
7

これに関する個人的なコードスニペットはありませんが、役立つ3つのリソースがあります。

リンク＃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");
于 2012-09-26T07:11:56.207 に答える
3

作業中のStackExchangeスクリプトについて非常によく似た問題に取り組んでおり、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();
        }
    }
});

これがFirefoxで機能するかどうかは、開発プロセスでまだそれほど進んでいないため、100％わかりません。お役に立てれば！

于 2012-09-26T07:07:05.540 に答える
2

これは古い質問ですが、おそらくこれは他の人が代替の解決策を探すのに役立つ可能性があります。最近、Mutation Observersについて学び、jQueryと一緒に使用して実験したいと思いました。私は2つの可能なアプローチを考え出し、それらをプラグインに変えました。コードはこちらから入手できます。

最初のアプローチ（jquery.observeWithEvents.js）は、jQueryの関数を使用して、jQueryの関数を介してバインドできるまたはイベントtrigger()をトリガーします。2番目のアプローチ（）は、従来のコールバックパラメータを使用します。例と使用法については、READMEをご覧ください。insertNoderemoveNodeon()jquery.observeWithCallbacks.js

于 2013-07-03T03:37:15.970 に答える