前端使用mutationObserver
mutationObserver
是一个在浏览器环境中一种用于监听DOM变化的JavaScript API,它可以用于监听 DOM 树中指定节点及其子节点的变化,当节点内容、属性、子节点结构等发生改变时,它可以及时检测到并触发回调函数。这对于前端开发来说非常有用,可以被用来监控 DOM 变化、异步数据加载和自定义组件等场景。
基本用法
// 创建一个 MutationObserver 实例,监听目标节点的变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type); // 打印出变化类型,例如 childList、attributes 等
});
});
// 配置 MutationObserver,指定监听的节点和监听类型
const config = {
attributes: true, // 监听属性变化
childList: true, // 监听子节点变化
// characterData: true, // 监听文本内容变化
subtree: true // 监听后代节点变化
};
// 将 MutationObserver 实例绑定到一个目标节点
const targetNode = document.getElementById("target");
observer.observe(targetNode, config);
上面的代码创建了一个MutationObserver
实例,并将其绑定到一个目标节点上。当目标节点或其子孙节点发生变化时,MutationObserver
实例会调用传入的回调函数,其中参数mutations
是一个MutationRecord
数组,包含了所有变化记录的信息。
监听类型
MutationObserver
的config
参数可以用来指定监听的类型,它有以下几个属性:
attributes
:监听属性变化;childList
:监听子节点的添加、删除;characterData
:监听文本内容的变化;subtree
:监听目标节点的所有后代节点的变化。
我们可以将多个类型组合起来,例如:
const config = {
attributes: true, // 监听属性变化
childList: true, // 监听子节点变化
subtree: true // 监听后代节点变化
};
上面的配置表示监听目标节点及其子孙节点的所有变化。
断开监听
我们可以通过disconnect
方法来断开MutationObserver
实例的监听:
observer.disconnect();
应用场景
mutationObserver
的应用场景非常广泛,以下是一些常见的例子:
- 自动保存表单:监听表单内容的变化,自动保存表单内容,避免用户手动点击保存按钮;
- 自动加载数据:监听列表滚动条位置的变化,自动加载更多数据;
- 观察者模式:监听一个对象的变化,当变化发生时触发相应的回调函数。
- 自动获取页面高度:监听页面添加元素成员,自动计算高度(微页面组装元素列表)
总之,mutationObserver
可以帮助我们在DOM变化时及时更新页面,并提升用户体验。
注意事项
- 在监听节点变化时,需要注意避免无限循环,例如在回调函数中修改了被监听的节点,会导致 MutationObserver 不断触发。
- 在监听异步数据加载和自定义组件等场景时,需要注意是否有对应的节点或属性需要监听。
- 在兼容性方面,MutationObserver 在 IE9 及以下版本不支持。