前情
一直以來都沒有好的方式可以監聽元素變化，Mutation events雖然可以監聽DOM樹結構變化，但是因性能問題和差的兼容問題（Webkit內核不支持）並不推薦使用。
MutationObserver介紹
MutationObserver接口提供了監視對DOM樹所做更改的能力。它被設計爲舊的Mutation Events功能的替代品，該功能是DOM3 Events規範的一部分，兼容IE11+
調用方式：
// 創建一個觀察器實例並傳入回調函數，它會在指定的DOM發生變化時被調用回調函數
const observer = new MutationObserver(callback);
// 以上述配置開始觀察目標節點
observer.observe(element, config);
observer實例方法：
| disconnect | 阻止MutationObserver實例繼續接收通知，直到再次調用其observe()方法，該觀察者對象包含的回調函數都不會再被調用 |
|---|---|
| observe | 啓動監聽，observe(target, config)： |
| target：要監聽的元素，config：監聽配置，指定監聽哪些變化 | |
| takeRecords | 從MutationObserver的通知隊列中刪除所有待處理的通知，並將它們返回到MutationRecord對象的新Array中 |
MutationObserver監聽配置，observe的第二個參數：
| 屬性 | 說明 |
|---|---|
| attributes | 設爲 true 以觀察受監視元素的屬性值變更，默認值false |
| attributeFilter | 要監視的特定屬性名稱的數組。如果未包含此屬性，則對所有屬性的更改都會觸發變動通知 |
| characterData | 設爲 true ，以監視指定目標節點或子節點樹中節點所包含的字符數據的變化 |
| childList | 設爲 true ，以監視目標節點及其子節點，默認值爲 false |
| subtree | 設爲 true，以監視目標節點及其子孫節點，默認值爲 false |
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
*{
padding: 0;
margin: 0;
}
.item{
width: 100%;
min-height: 40px;
overflow: hidden;
resize: both;
margin-bottom: 5px;
color: #fff;
background-color: red;
}
</style>
</head>
<body>
<div class="test">
<div class="item">item0</div>
<div class="item item-input" contentEditable></div>
<p>拖動右下角resize手柄或者輸入文本，都能監聽到變化</p>
</div>
<script>
window.onload = function() {
// Firefox和Chrome早期版本中帶有前綴
var MutationObserver = window.MutationObserver|| window.WebKitMutationObserver || window.MozMutationObserver
// 選擇目標節點
var target = document.querySelector('.test');
// 創建觀察者對象
var observer = new MutationObserver(function(mutations) {
console.log('--observer test--');
});
// 配置觀察選項:
var config = {
childList: true,
attributes: true,
characterData: true,
subtree: true
}
// 傳入目標節點和觀察選項
observer.observe(target, config);
var input = document.querySelector('.item-input');
input.innerHTML = '123654';
}
</script>
</body>
</html>
演示地址：https://jsbin.com/nakobuv/edit?html,css,js,console,output