js动态监听dom变化

Posted qq281113270

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js动态监听dom变化相关的知识,希望对你有一定的参考价值。

原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑

 

 

 

// 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();  

 

浏览器支持情况:

技术分享图片

 

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://lcddjm.com/article/5a9fac195809d15ba1019710 © www.lcddjm.com

以上是关于js动态监听dom变化的主要内容,如果未能解决你的问题,请参考以下文章

JS-监听整个页面上的DOM树变化

React 监听子元素dom内容高度变化

如何监听dom元素的显示隐藏事件

vue如何监听到原生js删除dom结点

js监听页面元素变化

JQuery如何监听一个DIV宽高的变化?