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

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

这可能吗？如果是，我该怎么做？理想情况下，我正在寻找live jQuery的

live

方法，除了绑定像

click

这样的事件之外，它更像是在DOM中加载元素时发生的事件<代码>加载事件对某些元素有效，但我不认为对所有元素都有效

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

---

编辑：我正在寻找一些可以在我的invert Color bookmarklet上使用的东西：

这很难实现，因为没有可行的事件来响应DOM更改。我宁愿坚持活动授权

但有些活动你可能会觉得有用或有趣。你可以看到例如：

• 域节点插入

• 域节点插入文档

• DOMNodeRemoved

• DOMElementNameChanged

---

但是，它们都被标记为W3C草稿。

检测节点插入的一般方法是使用

DOMNodeInserted

突变事件

---

实际上，我对每个节点都感兴趣。我正在更改页面上所有内容的颜色

---

为此，一个更好的解决方案是注入一个动态样式表，用

就足够了！重要

标志。如果您只想更改颜色，我建议使用扩展名（）而不是GreaseMonkey。

如果您运行的是Firefox或Chrome之类的浏览器，您可以监听

DomainNodeInserted

事件：

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

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

---

此处的更多信息：

如果您无法访问像jQuery这样的库，以下是仅使用JavaScript的语法：

---

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

这里有一个处理节点插入事件的好方法。使用css为要添加的元素设置动画

<style type="text/css">

/* set up the keyframes; remember to create prefixed keyframes too! */

@keyframes nodeInserted {  
from { opacity: 0.99; }
to { opacity: 1; }  
}

#parent > button {
animation-duration: 0.001s;
animation-name: nodeInserted;
}

</style>

/*设置关键帧；记住也要创建带前缀的关键帧*/
@关键帧节点插入{
从{opacity:0.99；}
到{opacity:1；}
}
#父项>按钮{
动画持续时间：0.001s；
动画名称：nodeInserted；
}

#parent是div的id，我将在其中附加按钮的 动态地

var insertListener=函数（事件）{
如果（event.animationName==“nodeInserted”）{
//这是知道我们的监听器工作的调试！
//event.target是新节点！
console.warn（“插入了另一个节点！”，event，event.target）；
}
}
document.addEventListener（“animationstart”，insertListener，false）；//标准+火狐
document.addEventListener（“MSAnimationStart”，insertListener，false）；//即
document.addEventListener（“webkitAnimationStart”，insertListener，false）；//铬+狩猎
setInterval（函数（）{
var btn=document.createElement（“按钮”）；
var t=document.createTextNode（“单击我”）；//创建一个文本节点
附肢儿童（t）；
document.getElementById（“父”）.appendChild（btn）；
}, 2000);

您希望应用哪种功能？您可以侦听

domandeinsertedintocument

事件，但这可能适用于许多您不感兴趣的插入节点。实际上，我对每个节点都感兴趣。我正在更改页面上所有内容的颜色。对，但是

！重要信息

标志将破坏大量页面。我想创建一个智能脚本，它可以在许多不同的页面上工作，并且看起来很好。@Muhd您可以选择智能选择器来只选择特定的元素。Style通过

@-moz document regexp（）

，支持使用正则表达式进行域选择-另请参见。实现了哪些浏览器？理想情况下，我想要一些在Chrome中工作的东西。“草稿”标记是MDC编辑的一个疏忽。这些事件也出现在DOML2事件中，即“重新结束”。事实上，这些活动中的大多数都适用于除IE以外的所有事情；但是如果可以的话，你应该避免使用它们，因为它们有主要的缺点（细节：），为了随机读者的缘故，我想指出：如果可以避免的话，就不要使用突变事件。详情：@Nickolay-谢谢你的参考。我知道一般来说使用这些是个坏主意，但对于OP的用例来说似乎是合理的（除其他外，讨论的是用户脚本，所以他将是唯一一个受到缓慢或崩溃影响的人）.我已经实现了此方法，并在

insertListener

方法中编程了

iframe

的一些响应性大小调整。奇怪的是，自定义大小调整行为只有在向下滚动到

iframe

之后才会发生，而不是之前。知道这里发生了什么吗？

document.addEventListener('DOMNodeInserted', nodeInsert)

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

<style type="text/css">

/* set up the keyframes; remember to create prefixed keyframes too! */

@keyframes nodeInserted {  
from { opacity: 0.99; }
to { opacity: 1; }  
}

#parent > button {
animation-duration: 0.001s;
animation-name: nodeInserted;
}

</style>

<script type="text/javascript">

    var insertListener = function(event){
        if (event.animationName == "nodeInserted") {
            // This is the debug for knowing our listener worked!
            // event.target is the new node!
            console.warn("Another node has been inserted! ", event, event.target);
        }
    }

    document.addEventListener("animationstart", insertListener, false); // standard + firefox
    document.addEventListener("MSAnimationStart", insertListener, false); // IE
    document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

    setInterval(function(){

        var btn = document.createElement("BUTTON");

        var t = document.createTextNode("CLICK ME");       // Create a text node

        btn.appendChild(t);         

        document.getElementById("parent").appendChild(btn);

    }, 2000);

</script>