MutationObserver監聽DOM元素結構變化和屬性變化實例

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//瀏覽器兼容
var config = { attributes: true, childList: true}//配置對象
$("要監聽的DOM元素").each(function(){
   var _this = $(this);
   var observer = new MutationObserver(function(mutations) {//構造函數回調
      mutations.forEach(function(record) {
         if(record.type == "attributes"){//監聽屬性
　　　　　　　　//do any code
         }
         if(record.type == 'childList'){//監聽結構發生變化
              //do any code
         }
      });
   });
   observer.observe(_this[0], config);
});

配置對象config屬性

• childList：子元素的變動
• attributes：屬性的變動
• characterData：節點內容或節點文本的變動
• subtree：所有下屬節點（包括子節點和子節點的子節點）的變動
• attributeFilter: 監聽制定屬性[attrName]

注：subtree不可以單獨使用，需和其它屬性配合；

停止監聽觀察

observer.disconnect();

清除歷史監聽記錄

observer.takeRecord

　

record返回對象的屬性

• type:觀察的變動類型（attribute、characterData或者childList）。
• target:發生變動的DOM對象。
• addedNodes:新增的DOM對象。
• removeNodes:刪除的DOM對象。
• previousSibling:前一個同級的DOM對象，如果沒有則返回null。
• nextSibling:下一個同級的DOM對象，如果沒有就返回null。
• attributeName:發生變動的屬性。如果設置了attributeFilter，則只返回預先指定的屬性。
• oldValue:變動前的值。這個屬性只對attribute和characterData變動有效，如果發生childList變動，則返回null。