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

Question

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

这可能吗？如果是这样,我该怎么做？理想情况下,我正在寻找一些实时jQuery的live方法,除了它不是绑定一个事件,就像click它更像是在DOM中加载元素时发生的事件. load事件对某些元素有效,但我不认为...

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

编辑:我正在寻找在我的反转颜色bookmarklet上使用的东西:JavaScript:在页面的所有元素上反转颜色

Answer 1

假设你正在运行像Firefox或Chrome这样的浏览器,你可以听一下这个DOMNodeInserted事件:

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

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

小提琴: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

Answer 2

如果您无法访问像jQuery这样的库，这里是仅JavaScript 中的语法：

document.addEventListener('DOMNodeInserted', nodeInsert)

function nodeInsert () {
  event.srcElement.style.color = '#ffffff'
}

我认为它应该适用于大多数浏览器。