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

Posted 2020-08-15 深蓝前端

 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。