web-dev-qa-db-ja.com

jQueryセレクターをDOM突然変異オブザーバーで使用できますか？

HTML5には、ブラウザのDOMへの変更を監視するための "mutation observers" の概念が含まれています。

オブザーバーコールバックには、DOMツリースニペットによく似たデータが渡されます。それらがまさにこれなのか、それとも本当に機能するのかはわかりません。

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

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

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

jqueryhtml5jquery-selectorsgreasemonkeymutation-observers
36
hippietrail

はい、突然変異オブザーバーコールバックに返されるデータで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") );
        }
    } );
}
_

_mutation.removedNodes_でjQueryを実行できることに注意してください。

コンソールから$(".myclass").html ("[censored!]");を実行するとChromeおよびFirefoxから取得できます：

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

返されたノードセットで通常のjQuery選択メソッドを使用できることを示しています。

51
Brock Adams

このコードには個人用のコードスニペットはありませんが、役立つ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");
7
Vita Pluvia

私が取り組んでいるStack Exchangeスクリプトで非常によく似た問題に取り組んでおり、DOMの変更を監視できる必要がありました。 jQueryのドキュメントには有用なものはありませんでしたが、ChromeでDOMNodeInsertedイベントが機能することを発見しました。

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％わかりません。お役に立てれば！

3
jmort253

私はこれが古い質問であることを知っていますが、おそらくこれは他の解決策を探している人を助けることができるでしょう。私は最近、突然変異オブザーバーについて学び、jQueryとともにそれらを使用して実験したいと考えました。私は2つの可能なアプローチを思いつき、それらをプラグインに変えました。コードは利用可能です ここ 。

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

2
Bart Jedrocha