JS监听dom高度变化方法总结

缺乏、安全感 2023-10-09 23:39 35阅读 0赞

### ![bc2d7b3ba4b148ae817a9e70cfd3520b.png][]前言 ###

有时候我们需要监听dom的变化，例如有时候图片未加载完就取 dom 的高度，这样会导致高度不正确，所以需要监听 dom 的高度变化。才能准确获取dom的高度，那么有哪些监听dom高度变化的方法呢？今天简单列举一下。

### 监听dom树变化DOMNodeInserted ###

可以用DOMNodeInserted事件监听子元素是否改变，但是不是很准确。

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 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 目前来看，IE11及以上都可以兼容。兼容性还可以，可以大胆使用。

MutationObserver 构造函数的实例传的是一个回调函数，该函数接受两个参数，第一个是变动的数组，第二个是观察器的实例。

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

#### MutationObserver 的应用 ####

针对动画animation、transform监听不到的情况，可以在动画完成监听高度就可以了

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

### ResizeObserver ###

ResizeObserver 是新的API,处于实验阶段，因此，兼容性不太好，文档：[ResizeObserver - Web API 接口参考 | MDN][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 上监听动画 transitionend；
> 
> 监听 window 的 resize 事件；
> 
> 其次用 MutationObserver 监听 document 元素；
> 
> 兼容IE11以下 通过 DOMSubtreeModified 监听 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;
    };

### 小结 ###

以上就是总结的js如何监听dom变化的方法，假如你不用兼容老的浏览器，可以用最新的ResizeObserver，当然也可以用ResizeObserver，配合Polyfill来进行。

[bc2d7b3ba4b148ae817a9e70cfd3520b.png]: https://img-blog.csdnimg.cn/bc2d7b3ba4b148ae817a9e70cfd3520b.png
[ResizeObserver - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver