JavaScript检测DOM中的更改

JavaScript检测DOM中的更改

MutationObserver

现代浏览器支持新功能：

Chrome 18以上版本，Firefox 14以上版本，IE 11以上版本，Safari 6以上版本

如果您需要支持较旧的方法，则可以尝试使用其他方法，例如下面这个5（！）年的答案中提到的方法。有龙。请享用 ：）

---

有人在更改文档吗？因为如果您完全控制更改，则只需要创建自己的

domChanged

API（带有函数或自定义事件），然后在修改所有内容时触发/调用它即可。

在DOM Level-2的具有突变的事件类型，但IE浏览器的旧版本不支持它。请注意，DOM3事件规范中不赞成使用突变事件，并且会降低性能。

您可以尝试

onpropertychange

在IE中模拟突变事件（如果没有可用的方法，可以使用暴力破解方法）。

对于 完整的 domChange，间隔可能是一个过大的杀伤力。想象一下，您需要存储整个文档的当前状态，并检查每个元素的每个属性是否相同。

也许如果您只对元素及其顺序感兴趣（如您在问题中所提到的），那么

getElementsByTagName("*")

可以使用a。如果您添加元素，删除元素，替换元素或更改文档的结构，则会自动触发。

我写了一个概念证明：

(function (window) {    var last = +new Date();    var delay = 100; // default delay    // Manage event queue    var stack = [];    function callback() {        var now = +new Date();        if (now - last > delay) { for (var i = 0; i < stack.length; i++) {     stack[i](); } last = now;        }    }    // Public interface    var onDomChange = function (fn, newdelay) {        if (newdelay) delay = newdelay;        stack.push(fn);    };    // Naive approach for compatibility    function naive() {        var last = document.getElementsByTagName('*');        var lastlen = last.length;        var timer = setTimeout(function check() { // get current state of the document var current = document.getElementsByTagName('*'); var len = current.length; // if the length is different // it's fairly obvious if (len != lastlen) {     // just make sure the loop finishes early     last = []; } // go check every element in order for (var i = 0; i < len; i++) {     if (current[i] !== last[i]) {         callback();         last = current;         lastlen = len;         break;     } } // over, and over, and over again setTimeout(check, delay);        }, delay);    }    //    //  Check for mutation events support    //    var support = {};    var el = document.documentElement;    var remain = 3;    // callback for the tests    function decide() {        if (support.DOMNodeInserted) { window.addEventListener("DOMContentLoaded", function () {     if (support.DOMSubtreeModified) { // for FF 3+, Chrome         el.addEventListener('DOMSubtreeModified', callback, false);     } else { // for FF 2, Safari, Opera 9.6+         el.addEventListener('DOMNodeInserted', callback, false);         el.addEventListener('DOMNodeRemoved', callback, false);     } }, false);        } else if (document.onpropertychange) { // for IE 5.5+ document.onpropertychange = callback;        } else { // fallback naive();        }    }    // checks a particular event    function test(event) {        el.addEventListener(event, function fn() { support[event] = true; el.removeEventListener(event, fn, false); if (--remain === 0) decide();        }, false);    }    // attach test events    if (window.addEventListener) {        test('DOMSubtreeModified');        test('DOMNodeInserted');        test('DOMNodeRemoved');    } else {        decide();    }    // do the dummy test    var dummy = document.createElement("div");    el.appendChild(dummy);    el.removeChild(dummy);    // expose    window.onDomChange = onDomChange;})(window);

用法：

onDomChange(function(){     alert("The Times They Are a-Changin'");});

适用于IE 5.5 +，FF 2 +，Chrome，Safari 3+和Opera 9.6+