几个监听dom的api你都知道吗？

最新推荐文章于 2025-11-14 04:49:03 发布

原创最新推荐文章于 2025-11-14 04:49:03 发布 · 483 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了如何使用ResizeObserver监听DOM尺寸变化，MutationObserver监听节点内部变化，以及IntersectionObserver的使用方法。通过实例展示了这三个API在JavaScript中的用法及其在Web开发中的重要性。

1.ResizeObsever:监听dom尺寸变化的api

使用方式：

const resizeObserver=new ResizeObserver(entries=>{
   for(const entry of entries){
     const contentBoxSize= Array.isArray(entry.contentBoxSize)
                           ?entry.contentBoxSize[0]
                           :entry.contentBoxSize
     console.log(entry)
     // todo
   }
})

resizeObserver.observe(document.querySelector('body'))

MDN文档地址：ResizeObserver

2.MutationObserver：监听节点内部变化的API

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
           mutation.removedNodes */
        break;
      case "attributes":
        /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
           该属性之前的值为 mutation.oldValue */
        break;
    }
  });
}

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true, // 观察目标子节点的变化，是否有添加或者删除
  attributes: true, // 观察属性变动
  subtree: true, // 观察后代节点，默认为 false
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);