Js动态监听listen dom变化(支持WebView)并作出处理

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

// 选择目标节点
var target = document.querySelector('#some-id');
 
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
 
// 传入目标节点和观察选项
observer.observe(target, config);
 
// 随后,你还可以停止观察
observer.disconnect();

实例方法

MutationObserverInit

MutationObserverInit是一个用来配置观察者对象行为的对象,该对象可以拥有下面这些属性:

测试实例：

// Chrom  Console 监听 title变化
new MutationObserver(function(mutations) {
    console.log(document.title);
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
}).observe(document.querySelector('title'), { attributes: true, childList: true, characterData: true });

// 每当title节点变化，console以下结果
// 焦点之中的万能险：资金错配与被动加杠杆（标题）
// childList（mutation.type）

api：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

更多实例应用扫码体验：