jquery - jQuery 选择器可以与 DOM 突变观察器一起使用吗？

Question

HTML5 包含一个概念 "mutation observers"监控浏览器 DOM 的变化。

您的观察者回调将传递看起来很像 DOM 树片段的数据。我不知道它们到底是不是这样或者它们是如何工作的。

但是当您编写代码与您无法控制的第 3 方网站交互时，例如使用 Greasemonkey 脚本或 Google Chrome 用户脚本，您必须检查传入的元素树以查找哪些信息是相关的给你。

与手动遍历树相比，使用选择器就像使用任何 DOM 一样简单得多，尤其是对于跨浏览器代码。

有没有办法将 jQuery 选择器与传递给 HTML5 变异观察者回调的数据一起使用？

Answer 1

是的，您可以对返回到变异观察器回调的数据使用 jQuery 选择器。

See this jsFiddle.

假设您有这样的 HTML，并且设置了一个观察者，如下所示:

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"));
    }
  });
}
setTimeout(function() {  
  $(".myclass").html ("[censored!]");
},1000)  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="myclass"> 
  <span class="myclass2">My 
    <span class="boldly">vastly</span> improved
  </span> 
  text.
</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 选择方法。