html5 监测dom变化,关于javascript:可以用来监听Dom类名样式变化的方法-MutationObserver...

应用状况

在最近的我的项目中,牵扯到了A我的项目中援用了B我的项目中的公共组件,比方顶部导航栏,cookie之类的,别离使用的不同的技术栈vue&jq,在不不便管制B我的项目中的点击事件时,监听Dom的class或style变动,而进行操作,应用到了MutationObserver

应用办法

参考MDN:MutationObserver的 observe() 办法配置了 MutationObserver 对象的回调办法以开始接管与给定选项匹配的DOM变动的告诉。依据配置,观察者会察看 DOM 树中的单个 Node,也可能会察看被指定节点的局部或者所有的子孙节点。MutationObserver

mutationObserver.observe(target[, options])

target

DOM树中的一个要察看变动的DOM Node (可能是一个Element) , 或者是被察看的子节点树的根节点。

options 可选

一个可选的MutationObserverInit 对象,此对象的配置项形容了DOM的哪些变动应该提供给以后观察者的callback。

demo

$('button.a').click(function(e) {

e.preventDefault();

$('body').hasClass('test')

? $('body').removeClass('test')

: $('body').addClass('test');

});

$('button.b').click(function(e) {

e.preventDefault();

$('body').css('background-color') == 'rgb(255, 100, 50)'

? $('body').css('background-color', 'rgb(255, 200, 255)')

: $('body').css('background-color', 'rgb(255, 100, 50)');

});

let testObserver = new MutationObserver(function(mutations) {

mutations.forEach(mutation => {

console.log(mutation.target);

});

});

/**Element**/

testObserver.observe($('body')[0], {

// subtree: true, // 所有上司节点(包含子节点和子节点的子节点)的变动

attributes: true, //检测属性变动

// childList: true, //检测子节点变动

// characterData: true, //节点内容或节点文本的变动。

attributeFilter: ['class', 'style'], // 标签所带的属性都可增加,包含自定义属性

});

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值