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'], // 标签所带的属性都可增加，包含自定义属性

});