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


    
    
     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。
    *********************************** Ahthor: Scot Wang Mail: wxg1837@qq.com QQ: 244821681 ***********************************
  • 相关阅读:
    mysql concat
    (三)微信小程序之发送服务通知(模板消息)
    小型web服务器thttpd的学习总结(下)
    小型web服务器thttpd的学习总结(上)
    平方根倒数快速算法
    微信公众平台服务框架
    静态库动态库回顾
    RocketMQ常用命令
    rocketmq配置文件参数(broker-xx.properties)
    RocketmMQ的组成及相关概念
  • 原文地址:https://www.cnblogs.com/scot/p/5994070.html
Copyright © 2020-2023  润新知