JQuery或vanilla Javascript中的DOM Mutation事件

Question

JQuery中是否有任何DOM突变事件或者是跨浏览器的vanilla Javascript？

为了澄清,我说我的页面上有一个脚本,它将div插入到正文中.我无法访问该脚本,我不知道何时插入了div.我想知道是否有一个DOM突变事件,我可以添加一个监听器,以了解何时插入了一个元素.我知道我可以使用计时器来定期检查插入,但是,我真的不喜欢这会带来的开销.

Answer 1

这肯定是一个黑客,但为什么不修补用于插入节点的底层DOM方法？有几种方法可以做到这一点:

一.您知道将附加哪个特定元素:

var c = document.getElementById('#container');
c.__appendChild = c.appendChild;
c.appendChild = function(){
     alert('new item added');
     c.__appendChild.apply(c, arguments); 
}

A的小提琴演示

乙.您知道将附加什么类型的元素:

HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild;
HTMLDivElement.prototype.appendChild = function(){
    alert('new item added');
    HTMLDivElement.prototype.__appendChild(this,arguments); 
}

B的小提琴演示

(请注意,不支持解决方案BIE < 8或不支持DOM原型的任何其他浏览器.)

同样的技术可以很容易地用于所有底层DOM突变功能,例如insertBefore,replaceChild或removeChild.

这是一般的想法,这些演示可以适用于几乎任何其他用例 - 比如你想要投射一个宽网并捕捉所有添加物,无论类型和确保它适用于所有浏览器的一切,但IE < 8？(见下面的例子C)

UPDATE

C.递归遍历DOM,在每个元素上交换函数以触发回调,然后将相同的补丁应用于任何追加的子项.

var DOMwatcher = function(root, callback){
  var __appendChild = document.body.appendChild;

  var patch = function(node){
    if(typeof node.appendChild !== 'undefined' && node.nodeName !== '#text'){
      node.appendChild = function(incomingNode){
        callback(node, incomingNode);
        patch(incomingNode);
        walk(incomingNode);
        __appendChild.call(node, incomingNode);
      };
    }
    walk(node);  
  };

  var walk = function(node){
    var i = node.childNodes.length;
    while(i--){
      patch(node.childNodes[i]);
    }
  };

  patch(root);

};

DOMwatcher(document.body, function(targetElement, newElement){ 
   alert('append detected');    
});

$('#container ul li').first().append('<div><p>hi</p></div>');
$('#container ul li div p').append('<a href="#foo">bar</a>');

C的小提琴演示

更新2

正如Tim Down评论的那样,上述解决方案也不会起作用,IE < 8因为appendChild它不是一个Function并且不支持call或者apply.我想你总是可以回到笨重但可靠的setInterval方法,如果typeof document.body.appendChild !== 'function'.

Answer 2

有一些过时的DOM突变事件,如DOMNodeInserted和DOMNodeInsertedIntoDocument这对我来说还是在Chrome 14和IE9工作.

请参阅http://jsfiddle.net/Kai/WTJq6/上的示例

请参阅W3C草案中的所有内容,网址为http://www.w3.org/TR/DOM-Level-3-Events/

Answer 3

我相信，并非没有插件，但如果我错了，我也不会感到惊讶。

我的研究发现有一些可供选择。

这是一个： http: //plugins.jquery.com/project/mutation-events

这是另一个：https: //www.adaptavist.com/display/jQuery/Mutation+Events