var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

​

var list = document.querySelector('ol');

​

var Observer = new MutationObserver(function(mutations){

  mutations.forEach(function(mutation){

    console.log(mutation);

  });

});

​

Observer.observe(list, {childList:true});  //假设此时target的outHTML内容为<div>foo<div>,则: 

list.childNodes[0].data = "bar";           

//不会触发回调函数,因为childList只观察节点的新建与删除,而这里target节点的子节点仍然只有一个,没有多,没有少

Observer.observe(list, {

childList:true,characterData:true});        //加上characterData属性,允许观察文本节点的变化,行不行? 

list.childNodes[0].data = "sds";            //还是不会触发回调函数,因为发生变化的是target节点的子节点,我们目前的目标节点只有一个,就是target.

Observer.observe(list, {

childList:true,characterData:true,subtree:true});  

//加上subtree属性,观察所有后代节点 

list.childNodes[0].data = "cha";