首页 > 代码库 > MutationObserver监听DOM元素结构变化和属性变化实例

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

2024-08-17 16:20:13   221人阅读





 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。
    • 



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






























        

            
                
                  
                
                

                    联系

                    我们