首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

MutationObserver:dom变化监听

如何来监听dom变化?

工作中突然有一个需求,必须你要监听dom的插入,那么就需要去监听dom变化。在一般印象中,监听事件应该是这么实现的比如 xx.addEventListener(xxx)。而实际上关于这个dom变化有一套html5标准。如在mdn写到MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。

使用方法 var observer = new MutationObserver(callback); 该构造函数会在指定dom事件触发的时候,调用回调函数。callback方法有2个参数,一个是描述所有被触发改动的 MutationRecord 对象数组,另一个是调用该函数的MutationObserver 对象。第一个属性比较重要,返回了改变的信息。

然后调用observer.observe(targetNode, observerOptions);该方法配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。根据配置,观察者会观察 DOM 树中的单个 Node,也可能会观察被指定节点的部分或者所有的子孙节点。observerOptions记录了选项设置。支持{attributeFilter, attributeOldValue, attributes, characterData, characterDataOldValue, childList ,subtree}。值得注意的是:当调用 observe() 方法时,childList,attributes 或者 characterData 三个属性之中,至少有一个必须为 true,否则会抛出 TypeError 异常。要停止 MutationObserver(以便不再触发它的回调方法),需要调用MutationObserver.disconnect()方法。

举个详细点的例子。一个页面我需要在它其他元素没有超过客户端高度的时候,给底部容易加以fixed布局。因为这样的话body后面就不会有空白。而内部容器是有可能实时变化的(元素插入或者删除)。这样就需要这个方法去监听变化。

const callback =function(mutations, ob){

for(let mutation of mutations){

if(mutation.type ==='childList'){

resizeHandler();//设置属性style

}

}

};

const targetNode = document.body;

const observerOptions ={

childList:true,// 观察目标子节点的变化,是否有添加或者删除

subtree:true// 观察后代节点,默认为 false

}

const observer =newMutationObserver(callback);

observer.observe(targetNode, observerOptions);

因为监听功能很强大,如果每次记录属性变化是非常复杂的,如果胡乱使用属性监听,浏览器会卡死。这里就一般记录节点。如果你的内容操作不是通过插入节点,而是修改属性的话,这个监听就会失效了。而这里的页面一般是自己制作的,不会有什么问题。

往期回顾:

扩展的上传与更新|给你代码

你是否像我一样排斥Composer?|给你代码

外贸开发信,标题怎么写被点开的机率比较大|外贸黄大仙

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200602A0KH0400?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券