网站优化公司哪家效果好,广州网站设计平台,网站建设平台源码,沈阳建设工程信息网中介Mutation Observer#xff08;变动观察器#xff09;是监视DOM变动的接口。当DOM对象树发生任何变动时#xff0c;Mutation Observer会得到通知。 要概念上#xff0c;它很接近事件。可以理解为#xff0c;当DOM发生变动会触发Mutation Observer事件。但是#xff0c;它与… Mutation Observer变动观察器是监视DOM变动的接口。当DOM对象树发生任何变动时Mutation Observer会得到通知。 要概念上它很接近事件。可以理解为当DOM发生变动会触发Mutation Observer事件。但是它与事件有一个本质不同事件是同步触发也就是说DOM发生变动立刻会触发相应的事件Mutation Observer则是异步触发DOM发生变动以后并不会马上触发而是要等到当前所有DOM操作都结束后才触发。 目前Firefox(14)、Chrome(26)、Opera(15)、IE(11)和Safari(6.1)支持这个API。Safari 6.0和Chrome 18-25使用这个API的时候需要加上WebKit前缀WebKitMutationObserver。可以使用下面的表达式检查浏览器是否支持这个API。 var MutationObserver window.MutationObserver ||window.WebKitMutationObserver ||window.MozMutationObserver;var mutationObserverSupport !!MutationObserver; 2、使用方法 首先使用MutationObserver构造函数新建一个实例同时指定这个实例的回调函数。 var observer new MutationObserver(callback); 2.1 observer方法 observer方法指定所要观察的DOM元素以及要观察的特定变动。 var article document.querySelector(article);var options {childList: true,arrtibutes: true
};observer.observer(article, options); 上面代码首先指定所要观察的DOM元素提article然后指定所要观察的变动是子元素的变动和属性变动。最后将这两个限定条件作为参数传入observer对象的observer方法。 MutationObserver所观察的DOM变动即上面代码的option对象包含以下类型 childList子元素的变动attributes属性的变动characterData节点内容或节点文本的变动subtree所有下属节点包括子节点和子节点的子节点的变动想要观察哪一种变动类型就在option对象中指定它的值为true。需要注意的是不能单独观察subtree变动必须同时指定childList、attributes和characterData中的一种或多种。 除了变动类型option对象还可以设定以下属性 attributeOldValue值为true或者为false。如果为true则表示需要记录变动前的属性值。characterDataOldValue值为true或者为false。如果为true则表示需要记录变动前的数据值。attributesFilter值为一个数组表示需要观察的特定属性比如[class, str]。2.2 disconnect方法和takeRecord方法 disconnect方法用来停止观察。发生相应变动时不再调用回调函数。 observer.disconnect(); takeRecord方法用来清除变动记录即不再处理未处理的变动。 observer.takeRecord 2.3 MutationRecord对象 DOM对象每次发生变化就会生成一条变动记录。这个变动记录对应一个MutationRecord对象该对象包含了与变动相关的所有信息。Mutation Observer进行处理的一个个变动对象所组成的数组。 MutationRecord对象包含了DOM的相关信息有如下属性 type:观察的变动类型attribute、characterData或者childList。target:发生变动的DOM对象。addedNodes:新增的DOM对象。removeNodes:删除的DOM对象。previousSibling:前一个同级的DOM对象如果没有则返回null。nextSibling:下一个同级的DOM对象如果没有就返回null。attributeName:发生变动的属性。如果设置了attributeFilter则只返回预先指定的属性。oldValue:变动前的值。这个属性只对attribute和characterData变动有效如果发生childList变动则返回null。3、实例 3.1 子元素的变动 下面的例子说明如果读取变动记录。 var callback function(records) {records.map(function(record) {console.log(Mutation type: record.type);console.log(Mutation target: record.target);});
};var mo new MutationObserver(callback);var option {childList: true,subtree: true
};mo.observer(document.body, option); 上面代码的观察器观察body元素的所有下级元素childList表示观察子元素subtree表示观察子元素的下级元素的变动。回调函数会在控制台显示所有变动的类型和目标元素。 3.2、属性的变动 下面的例子说明如何追踪属性的变动。 var callback function(records) {records.map(function(record) {console.log(Previous attribute value: record.oldValue);});
};var mo new MutationObserver(callback);var element document.getElementById(#my_element);var option {attribute: true,attributeOldValue: true
};mo.observer(element, option); 上面代码先设定追踪属性变动attributes: true然后设定记录变动前的值。实际发生变动时会将变动前的值显示在控制台。 4、参考链接 [1] Tiffany Brown, Getting to know mutation observers [2] Michal Budzynski, JavaScript: The less know parts.DOM Mutations [3] Jeff Griffiths, DOM MutationObserver - reacting to DOM changes without killing browser performance [4] Ruanyf, Mutation Observer 原文地址http://www.cnblogs.com/jscode/p/3600060.html 转载于:https://www.cnblogs.com/flxy-1028/p/10958176.html
