jQuery选择器可以与DOM变异观察者一起使用吗？ [英] Can jQuery selectors be used with DOM mutation observers?

问题描述

HTML5包含变异观察员的概念来监视对浏览器DOM的更改。

您的观察者回调将传递与DOM树代码片段很相似的数据。我不知道他们是否确实是这样或他们是如何工作的。

但是，当您编写代码与您无法控制的第三方网站进行交互时，用Greasemonkey脚本或谷歌浏览器用户脚本说，你必须检查传入的元素树，以找到哪些信息与你有关。

这非常简单与选择器一样，就像处理任何DOM，而不是手工操作树，特别是跨浏览器代码。

有没有办法使用jQuery选择器将数据传递给HTML5突变观察者回调？是的，你可以使用jQuery选择器对返回到变异的数据进行处理观察者回调。

查看此jsFiddle。

假设您的HTML如此：

 < span class =myclass> 
< span class =myclass2>我的< span class =boldly>极大地< / span>改进< /跨度> 
文本。 
< / 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}; 
 
 // ---向观察者添加一个目标节点。一次只能添加一个节点。 
 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 。

---

如果您运行 $（。myclass）。html（[censored！]）; 来自控制台，您可以通过Chrome和Firefox获取此内容：

  mutationHandler：
 childList 
 jQuery（< TextNode textContent =\ n>，span。 myclass2，< TextNode textContent =\\\
 text.\\\
>）
 true 
 jQuery（span.boldly）
  

这表明您可以在返回的节点集上使用正常的jQuery选择方法。

HTML5 includes a concept of "mutation observers" to monitor changes to the browser's DOM.

Your observer callback will be passed data which looks a lot like DOM tree snippets. I don't know if they are exactly this or how they work really.

But when you are writing code to interact with a 3rd party site over which you have no control, say with a Greasemonkey script or Google Chrome user script, you have to inspect the tree of elements passed in to find which information is relevant to you.

This is much simpler with selectors, just like working with any DOM, than walking the tree manually, especially for cross-browser code.

Is there a way to use jQuery selectors with the data passed to HTML5 mutation observer callbacks?

解决方案

Yes, you can use jQuery selectors on data returned to mutation observer callbacks.

See this jsFiddle.

Suppose you had HTML like so:

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

And you set an observer, like so:

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

You'll note that we can jQuery on the mutation.removedNodes.

---

If you then run $(".myclass").html ("[censored!]"); from the console you will get this from Chrome and Firefox:

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

which shows that you can use normal jQuery selection methods on the returned node sets.

这篇关于jQuery选择器可以与DOM变异观察者一起使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！