javascript - 插入时动态创建的 DOM 节点的处理程序

Question

我喜欢在我不拥有或控制的页面上运行自定义脚本。很多时候，这些页面动态创建了我想要应用功能的内容。

这可能吗？如果是这样，我该怎么做？理想情况下，我正在寻找一些实时 jQuery 的 live 方法，除了不是绑定(bind)像 click 这样的事件，它更像是在 DOM 中加载元素时发生的事件. load 事件适用于某些元素，但我认为并非适用于所有元素...

对于这个问题，假设您无法查看或更改插入 DOM 节点的代码。我想要一种可以在用户脚本或小书签中使用的技术，这种技术可以跨多个不相关的站点使用。

编辑:我正在寻找可以在我的反色书签上使用的东西:JavaScript: Invert color on all elements of a page

Answer 1

假设您运行的是 Firefox 或 Chrome 等浏览器，您可以监听 DOMNodeInserted 事件:

$(document).on('DOMNodeInserted', function(e) {
    $(e.target).css({ color : '#c00' });
});

$('body').append('<div>test</div>');​

fiddle :http://jsfiddle.net/VeF6g/ (在 IE 中可能会失败)

更新: 该事件已弃用。你应该使用 MutationObserver:

var observer = new MutationObserver(function(mutationList) {
    for (var mutation of mutationList) {
        for (var child of mutation.addedNodes) {
            child.style.color = '#c00';
        }
    }
});
observer.observe(document, {childList: true, subtree: true});

// ready? Then stop listening with
observer.disconnect();

更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver