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

标签 javascript jquery dom bookmarklet userscripts

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

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

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

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

最佳答案

假设您运行的是 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

关于javascript - 插入时动态创建的 DOM 节点的处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9778962/

相关文章:

javascript - 如何从 AlloyUI 图表中提取含义?

Javascript 监听 DOM 中的多个事件

java - 使用 AngularJS 传递参数时 Resteasy @FormParam null

javascript - React.js 中嵌套子组件之间的通信

Jquery post 不改变响应值

javascript - jQuery:定位除___之外的所有目标?

javascript - 仅针对链接行中的特定 <td> 禁用链接

javascript - 通过 jQuery 删除所选属性后刷新多选

javascript - 获取指定位置的元素 - JavaScript

javascript - 影子 DOM 中的 JQuery 选择元素