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

Question

HTML5 包含一个 “变异观察者” 的概念来监测浏览器 DOM 的变化。

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

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

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

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

原文由 hippietrail 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

看到这个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 选择方法。

原文由 Brock Adams 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我没有这方面的任何个人代码片段，但我有三个可能有用的资源：

• Mutabor Github 存储库
• 文章 + 用于 Mutator 的 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");

原文由 Vita Pluvia 发布，翻译遵循 CC BY-SA 3.0 许可协议