栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

JavaScript检测DOM中的更改

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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+



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442044.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号