MutationObserver-demo2

#div1

#div2

#div2-1

#div2-2

#div3

#div3-1

html代码

js代码

function change(){
 	if($('#i1').val()!=""){
     	 oberverFun($('#i1').val())
    }
}
function changeAttr(){
 	$($('#i2').val()).attr($('#i3').val(),$('#i4').val()); 
}
var observer = null;
function oberverFun(t){
  // Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
disConnect();
// 选择目标节点
var target = document.querySelector(t);
  $('#log').append("即将监听"+t+"<br/>");
 if(!target){
   $('#log').append("请输入元素id<br/>")
   return;
 }
  $('#log').append("开始监听"+t+"<br/>");
// 创建观察者对象
observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $('#log').append("变化的类型"+mutation.type+"；变化的属性"+mutation.attributeName+"；改变的元素"+mutation.target.id+"<br/>");
  });    
});
 
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true,subtree:true }
 
// 传入目标节点和观察选项
observer.observe(target, config);
 
// 随后,你还可以停止观察
//observer.disconnect();
}

function disConnect(){
 	 if(observer){
      	 observer.disconnect();
     }
}

css代码