JS監(jiān)聽dom高度變化幾種常用方法總結

更新時間：2023年10月10日 09:09:35 作者：1024小神

我們在開發(fā)中會遇到一些需求,需要監(jiān)聽元素變化,比如元素屬性變化,元素大小變化,這篇文章主要給大家介紹了關于JS監(jiān)聽dom高度變化幾種常用方法的相關資料,需要的朋友可以參考下

前言

有時候我們需要監(jiān)聽dom的變化，例如有時候圖片未加載完就取 dom 的高度，這樣會導致高度不正確，所以需要監(jiān)聽 dom 的高度變化。才能準確獲取dom的高度，那么有哪些監(jiān)聽dom高度變化的方法呢？今天簡單列舉一下。

監(jiān)聽dom樹變化DOMNodeInserted

可以用DOMNodeInserted事件監(jiān)聽子元素是否改變，但是不是很準確。

var dom = document.getElementById('dom');
var height = dom.offsetHeight;
dom.addEventListener('DOMNodeInserted', function () {
  var newHeight = dom.offsetHeight;
  if (newHeight !== height) {
    console.log('dom高度變化了');
    height = newHeight;
  }
});

MutationObserver 構造函數

Mutation Observer API 用來監(jiān)視 DOM 變動。DOM 的任何變動，比如節(jié)點的增減、屬性的變動、文本內容的變動，這個 API 都可以得到通知。目前來看，IE11及以上都可以兼容。兼容性還可以，可以大膽使用。

MutationObserver 構造函數的實例傳的是一個回調函數，該函數接受兩個參數，第一個是變動的數組，第二個是觀察器的實例。

var observer = new MutationObserver(function (mutations, observer){
  mutations.forEach(function (mutaion) {
    console.log(mutation);
  })
})

MutationObserver 的應用

var haoroomsId = document.getElementById('haorooms');
var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
var recordHeight = 0;
var mutationObserver = new MutationObserver(function (mutations) {
  console.log(mutations);
  let height = window.getComputedStyle(haoroomsId).getPropertyValue('height');
  if (height === recordHeight) {
    return;
  }
  recordHeight = height;
  console.log('高度變化了');
  // 之后更新外部容器等操作
})
mutationObserver.observe(haoroomsId, {
  childList: true, // 子節(jié)點的變動（新增、刪除或者更改）
  attributes: true, // 屬性的變動
  characterData: true, // 節(jié)點內容或節(jié)點文本的變動
  subtree: true // 是否將觀察器應用于該節(jié)點的所有后代節(jié)點
})

針對動畫animation、transform監(jiān)聽不到的情況，可以在動畫完成監(jiān)聽高度就可以了

  el.addEventListener('animationend', onHeightChange)
    el.addEventListener('transitionend', onHeightChange)

ResizeObserver

ResizeObserver 是新的API,處于實驗階段，因此，兼容性不太好，文檔：ResizeObserver - Web API 接口參考 | MDN

使用很簡單

// create an Observer instance
const resizeObserver = new ResizeObserver((entries) =>
  console.log('Body height changed:', entries[0].target.clientHeight)
);
// start observing a DOM node
resizeObserver.observe(document.body);

ResizeObserver Polyfill

實驗性的 API 不足，可以用 Polyfill 來彌補

ResizeObserver Polyfill 利用事件冒泡，在頂層 document 上監(jiān)聽動畫 transitionend；

監(jiān)聽 window 的 resize 事件；

其次用 MutationObserver 監(jiān)聽 document 元素；

兼容IE11以下通過 DOMSubtreeModified 監(jiān)聽 document 元素。

/**
 * Initializes DOM listeners.
 *
 * @private
 * @returns {void}
 */
ResizeObserverController.prototype.connect_ = function () {
    // Do nothing if running in a non-browser environment or if listeners
    // have been already added.
    if (!isBrowser || this.connected_) {
        return;
    }
    // Subscription to the "Transitionend" event is used as a workaround for
    // delayed transitions. This way it's possible to capture at least the
    // final state of an element.
    document.addEventListener('transitionend', this.onTransitionEnd_);
    window.addEventListener('resize', this.refresh);
    if (mutationObserverSupported) {
        this.mutationsObserver_ = new MutationObserver(this.refresh);
        this.mutationsObserver_.observe(document, {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        });
    }
    else {
        document.addEventListener('DOMSubtreeModified', this.refresh);
        this.mutationEventsAdded_ = true;
    }
    this.connected_ = true;
};