1 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容 2 var config = { attributes: true, childList: true}//配置对象 3 $("要监听的DOM元素").each(function(){ 4 var _this = $(this); 5 var observer = new MutationObserver(function(mutations) {//构造函数回调 6 mutations.forEach(function(record) { 7 if(record.type == "attributes"){//监听属性 8 //do any code 9 } 10 if(record.type == 'childList'){//监听结构发生变化 11 //do any code 12 } 13 }); 14 }); 15 observer.observe(_this[0], config); 16 });
配置对象config属性
- childList:子元素的变动
- attributes:属性的变动
- characterData:节点内容或节点文本的变动
- subtree:所有下属节点(包括子节点和子节点的子节点)的变动
- attributeFilter: 监听制定属性[attrName]
注:subtree不可以单独使用,需和其它属性配合;
停止监听观察
observer.disconnect();
清除历史监听记录
observer.takeRecord
record返回对象的属性
- type:观察的变动类型(attribute、characterData或者childList)。
- target:发生变动的DOM对象。
- addedNodes:新增的DOM对象。
- removeNodes:删除的DOM对象。
- previousSibling:前一个同级的DOM对象,如果没有则返回null。
- nextSibling:下一个同级的DOM对象,如果没有就返回null。
- attributeName:发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性。
- oldValue:变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null。