jQuery选择器可以与DOM一起使用吗？

HTML5包含一个监视浏览器DOM更改的概念

您的观察者回调将被传递数据，这些数据看起来很像DOM树片段。我不知道他们是否就是这样或者他们是如何工作的

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

与使用任何DOM一样，使用选择器比手动遍历树要简单得多，特别是对于跨浏览器代码

---

有没有一种方法可以将jQuery选择器用于传递给HTML5突变观察者回调的数据？

我正在处理的堆栈交换脚本的一个非常类似的问题，我需要能够监控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();
        }
    }
});

---

我不能100%确定这在Firefox中是否有效，因为我在开发过程中还没有做到这一点。希望这有帮助

我没有关于这篇文章的任何个人代码片段，但我有三个资源可以提供帮助：

• （可能是这三者中最好的一个）

链接#3“jquery变异摘要”库中的示例：

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

//使用文档侦听页面上的所有事件（您可能希望更具体）
var$observerSummaryRoot=$（文档）；
//最简单的回调，只需登录到控制台
函数回调（摘要）{
控制台日志（摘要）；
}
//连接突变摘要
$observerSummaryRoot.mutationSummary（“连接”，回调，[{all:true}]）；
//做点什么来触发突变摘要
$（“”，{href:http://joelpurra.github.com/jquery-mutation-summary}）.text（“转到jquery突变摘要网站”）.appendTo（“正文”）；
//完成监听后断开连接
$observerSummaryRoot.mutationSummary（“断开”）；

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

假设您有这样的HTML：

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

您会注意到，我们可以jQuery查询

突变.removedNodes

---

然后运行

$（“.myclass”）.html（“[censtered！]”）从控制台您将从Chrome和Firefox获得以下信息：

mutationHandler:
儿童名单
jQuery（，span.myclass2，）
真的
jQuery（span.粗体）

这表明您可以对返回的节点集使用普通的jQuery选择方法。
我知道这是一个老问题，但这可能有助于其他人搜索替代解决方案。我最近了解了变异观察者，并想在jQuery中使用它们。我提出了两种可能的方法，并将它们转换成插件。代码是可用的

第一种方法（
jquery.observeWithEvents.js
）使用jquery的
trigger（）
函数触发
insertNode
或
removeNode
事件，该事件可以通过jquery的
on（）
函数绑定。第二种方法（
jquery.observeWithCallbacks.js
）使用传统的回调参数。请查看自述文件中的示例和用法
 我使用的是
WebKitMutationObserver（）
，我认为它是新的、受支持的，旧的东西是不推荐的。我不确定
domanodeinserted
是否是“老东西”的一部分
WebKitMutationObserver
向您传递一个translations对象，虽然我猜它本身不是DOM，但它基本上是一个DOM引用包。我想知道我是否可以用jQuery包装它或其中的一些引用……我自己没有用过，但从您描述它的方式来看，我怀疑您可能必须访问原始DOM元素本身，以便将它们传递到jQuery对象中，就像两个拼图中的片段一样。我想这取决于实际的数据类型。也许看看“typeof”给了你什么，看看它是否是一种容易包装的东西。希望这有帮助<编码>域节点插入

不是突变观察员的一部分。突变观察员取代的是陈旧的、有缺陷的、不推荐使用的突变事件系统@BrockAdams-如果你有答案，你应该发布一个答案。事实上，我曾经计划在我自己的代码中用更好的东西来代替它。你知道jQuery是否正式支持它，它是否在jQuery支持的所有浏览器中都能工作，以及哪些浏览器支持它吗？可能是因为它恰好在这些浏览器中工作？看来可能是这样，因为行为似乎有所不同。。。无论如何，我现在肯定要玩它！（：我不认为这是一个“官方”的问题支持。比如

removedNodes

和

addedNodes

。jQuery整天都在这样的列表上工作，一直都是这样……代码在Firefox和Chrome上工作，并且符合W3C规范。它应该可以在任何支持这样事件的浏览器上工作。当我问这个问题时，我的脑海中有一些模糊的回忆“片段"在过去，当它们没有连接到文档DOM时，会有一些不同，并且不确定在jQuery下是否仍然存在这种差异。不幸的是，JSFIDLE不再工作，至少在FF 24.0中是这样。它会在控制台中发出一些警告并死掉。如果您无法复制pro，我可以列出错误问题。它在Chrome 30.0中确实可以工作。不过。@Gutza，我刚刚在FF 24和Chrome最新版本中测试了它。它仍然可以工作，我没有看到任何错误。请从干净的FF配置文件或其他机器上重试。相关问题：，另请参阅：有一个插件：嗯，我只是尝试使用的非jQuery原始版本，但发现它对w不起作用页面设计时不考虑用户脚本。它擅长观察

id

或

cla引用的元素的变化
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") );
        }
    } );
}