如何将元素添加到页面时收到通知？

javascript dom event-handling mutation-observers change-notification

2022-08-30 02:37:38

我希望在将DOM元素添加到页面时运行我选择的函数。这是在浏览器扩展的上下文中，因此网页独立于我运行，我无法修改其源。我在这里有什么选择？

我想，从理论上讲，我可以用来不断搜索元素的存在，并在元素存在时执行我的操作，但我需要一个更好的方法。setInterval()

答案 1

警告！

这个答案现在已经过时了。DOM Level 4 引入了 MutationObserver，为已弃用的突变事件提供了有效的替代方案。请参阅另一个问题的答案，以获得比此处提供的解决方案更好的解决方案。认真地。不要每 100 毫秒轮询一次 DOM;它会浪费CPU功率，你的用户会讨厌你。

由于突变事件在 2012 年被弃用，并且您无法控制插入的元素，因为它们是由其他人的代码添加的，因此您唯一的选择是不断检查它们。

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}

调用此函数后，它将每 100 毫秒运行一次，即 1/10（十分之一秒）。除非你需要实时的元素观察，否则它应该就足够了。

答案 2

实际的答案是“使用突变观察者”（如本问题所述：确定HTML元素是否已动态添加到DOM中），但是支持（特别是在IE上）是有限的（http://caniuse.com/mutationobserver）。

因此，实际的答案是“使用突变观察者....最终。但现在就用何塞·费蒂的答案吧“:)