DOM节点变化监听MutationObserver（节点、属性、子节点。。变动）

DOM规范的MutationObserver()构造函数 - 是MutationObserver接口内容的一部分 - 创建并返回一个新的观察者，它在DOM事件触发时调用指定的回调函数。DOM的观察不会立即启动;而必须先调用observe() 方法来确定要监听哪一部分的DOM以及要注意哪些更改。

function callback (mutationList, observer) {
    mutationList.forEach((mutation) => {
      switch (mutation.type) {
        case 'childList':
          /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
             mutation.removedNodes */
          break
        case 'attributes':
          /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
             该属性之前的值为 mutation.oldValue */
          break
      }
    })
  }

  let targetNode = document.querySelector('#someElement') // 获取监听 DOM 对象
  let observerOptions = {
    childList: true, // 观察该元素的子元素新增或者删除
    attributes: true, // 观察属性变动 
    subtree: true, //该元素的所有子元素新增或者删除
    characterData: true, // 监听text或者comment变化
    attributeOldValue: true, //属性原始值
    characterDataOldValue: true 
  }

  let observer = new MutationObserver(callback)
  observer.observe(targetNode, observerOptions)

  // 操作
  let dom = document.createElement('li')
  setTimeout(() => {
    targetNode.appendChild(dom) // 触发 childList
  }, 1000)
  setTimeout(() => {
    targetNode.style.color = 'red' // 触发 attributes
  }, 2000)