83.使用MutationObserver监听dom元素的变化

我们常用到动态计算页面的内容，假设我们需要动态给表格设置高度来实现表格铺满整个屏幕的效果。 表格高度=document.body.clientHeight(页面可视区域高度)-页面上其他元素高度（例如：tab，header，footer，搜索栏，操作栏等的高度）

new MutationObserver((mutations, observer) => {
  //监听table-header元素
  const el = document.querySelector('.table-header')
  if (el != null) {
    //每次监听完之后取消监听事件
    observer.disconnect()
    //因为原先计算height时加了操作栏的高度，因此要减去原来高度，没有时使用初始高度
    if (el.clientHeight > 52) {
      //height 页面上固定高度元素相加的和
      //el.clientHeight 动态元素的高度
      this.height = this.height + el.clientHeight
    }
  }

}).observe(document, { subtree: true })

• childList：子元素发生变化时触发回调（包含其本身）
• subtree：除了目标节点是否观察目标元素的子元素（不包含其本身）