JS监听DOM元素的变化

一、MutationObserver：监听DOM结构变化（增删改属性）

特点：精确、高性能，可配置观察选项（如子节点、属性、文本内容）

const target = document.createElement('div');
target.innerHTML = '<div>动态内容</div>';
document.body.appendChild(target);

const observer = new MutationObserver(() => {
    // 确保在下一帧执行，此时渲染已完成
    requestAnimationFrame(() => {
        console.log('真实高度:', target.offsetHeight);
        // observer.disconnect(); // 及时释放资源，中断监听
    });
});
observer.observe(document.body, {
    childList: true, // 监听子节点变化
    subtree: true    // 包括后代节点
});

 

二、IntersectionObserver：监听  元素可见性

特点：替代滚动事件监听，避免性能问题，支持阈值和根元素配置

 

三、ResizeObserver：监听  元素尺寸变化

特点：监听元素宽度/高度变化，替代resize事件或getBoundingClientRect()轮询

function afterRender(element, callback) {
  const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
      callback(element);
      observer.disconnect(); // 获取后断开连接，中断监听
    }
  });
  
  // 立即开始观察（支持异步内容加载）
  requestAnimationFrame(() => {
    observer.observe(element);
  });
}

// 使用示例同上