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

Question

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

这可能吗？如果是这样，我该怎么做？理想情况下，我正在寻找实时 jQuery 的 live 方法，除了绑定像 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>');​

小提琴：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 这样的库，这里是 only-JavaScript 中的语法：

document.addEventListener('DOMNodeInserted', nodeInsert)

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

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

Answer 3

这是处理节点插入事件的一种好方法。为要使用 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>

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

<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>

Answer 4

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

但有些活动您可能会觉得有用或有趣。在Mozilla Developer Network's list of DOM events 你可以看到例如：

• DOMNodeInserted,
• DOMNodeInsertedIntoDocument,
• DOMNodeRemoved,
• DOMElementNameChanged,

然而，它们都被标记为 W3C 草案。

Answer 5

检测节点插入的通用方法是使用DOMNodeInserted 突变事件。

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

为此，更好的解决方案是注入一个动态样式表，使用!important 标志就足够了。如果您只想更改颜色，我建议您使用 Stylish 扩展名 (Stylish for Chrome) 而不是 GreaseMonkey。