首页 > 网络编程 > JavaScript > javascript技巧 > JS监听dom高度变化

JS监听dom高度变化几种常用方法总结

2023-10-10 09:04:54 作者：1024小神

我们在开发中会遇到一些需求,需要监听元素变化,比如元素属性变化,元素大小变化,这篇文章主要给大家介绍了关于JS监听dom高度变化几种常用方法的相关资料,需要的朋友可以参考下

前言

有时候我们需要监听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 的应用

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, // 子节点的变动（新增、删除或者更改）
  attributes: true, // 属性的变动
  characterData: true, // 节点内容或节点文本的变动
  subtree: true // 是否将观察器应用于该节点的所有后代节点
})

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

  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 上监听动画 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来进行。

总结

到此这篇关于JS监听dom高度变化方法的文章就介绍到这了,更多相关JS监听dom高度变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！