MutationObserver监听DOM元素结构变化和属性变化实例

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容
var config = { attributes: true, childList: true}//配置对象
$("要监听的DOM元素").each(function(){
   var _this = $(this);
   var observer = new MutationObserver(function(mutations) {//构造函数回调
      mutations.forEach(function(record) {
         if(record.type == "attributes"){//监听属性
　　　　　　　　//do any code
         }
         if(record.type == 'childList'){//监听结构发生变化
              //do any code
         }
      });
   });
   observer.observe(_this[0], config);
});

配置对象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。