共计 4129 个字符,预计需要花费 11 分钟才能阅读完成。
点击在线浏览,体验更好 | 链接 |
---|---|
古代 JavaScript 高级小册 | 链接 |
深入浅出 Dart | 链接 |
古代 TypeScript 高级小册 | 链接 |
MutationObserver:监测 DOM 变动的弱小工具
引言
在 Web 开发中,操作和监测 DOM 元素的变动是一项常见的工作。MutationObserver 是 JavaScript 提供的一个弱小的 API,用于异步监测 DOM 树的变动,并在发生变化时执行相应的操作。本文将具体介绍 MutationObserver 的属性、利用场景以及应用示例,帮忙读者充沛了解和利用这一弱小的工具。
1. MutationObserver 简介
MutationObserver 是一个 JavaScript 的 API,用于监测 DOM 树的变动。它提供了一种异步的形式来监听 DOM 元素的减少、删除、属性变动等操作,以及文本节点的批改。通过 MutationObserver,开发者能够实时地捕捉到 DOM 的变动,并做出相应的响应。
MutationObserver 是在 2012 年引入的,目前被广泛支持的浏览器(包含 Chrome、Firefox、Safari、Edge 等)都提供了对 MutationObserver 的反对。
2. MutationObserver 的属性
MutationObserver 提供了一些属性,用于配置和管制观察器的行为。上面是一些罕用的属性:
- attributes:是否监测元素的属性变动。
- attributeOldValue:是否在属性变动时记录旧值。
- attributeFilter:指定要监测的属性列表。
- childList:是否监测子元素的增加或移除。
- subtree:是否监测后辈元素的变动。
- characterData:是否监测文本节点的内容变动。
- characterDataOldValue:是否在文本节点内容变动时记录旧值。
通过这些属性,能够灵便地配置 MutationObserver 的察看行为,以满足不同的需要。
3. MutationObserver 的利用场景
MutationObserver 在许多场景下都能施展重要作用。上面是一些常见的利用场景:
3.1 动静内容加载
当页面中的内容是通过异步加载或动静生成时,能够应用 MutationObserver 来监测内容的变动,并在变动产生后进行相应的解决,如更新页面布局、增加事件监听器等。例如,在有限滚动加载的场景中,当新的内容被加载到页面时,能够应用 MutationObserver 来主动监听内容的变动,并在变动产生后动静增加相应的元素或事件。
3.2 表单验证
当须要实时验证用户输出时,能够应用 MutationObserver 来监测表单元素的变动,以及对应的属性变动,如值的变动、禁用状态的变动等。这样能够及时地对用户的输出进行验证和反馈。例如,在一个表单中,当用户输出时,能够应用 MutationObserver 来监测输入框的值变动,并在值变动后进行实时的表单验证。
3. 响应式布局
当页面布局须要依据 DOM 变动自适应调整时,能够应用 MutationObserver 来监测相干元素的变动,并依据变动动静地调整页面布局。例如,在响应式网页设计中,当窗口大小发生变化或元素被增加或移除时,能够应用 MutationObserver 来监听相干元素的变动,并依据变动从新计算和调整页面布局,以适应不同的设施和屏幕尺寸。
3.4 自定义组件开发
在自定义组件的开发中,MutationObserver 能够用于监听组件外部的 DOM 变动,以及对应的属性变动。这样能够在组件外部做出相应的解决,如更新组件的状态、从新渲染组件等。例如,当一个自定义组件中的某个子元素被增加或移除时,能够应用 MutationObserver 来监听这些变动,并在变动产生后更新组件的状态或从新渲染组件。
4. 应用 MutationObserver 的示例
上面通过几个示例来演示如何应用 MutationObserver 进行 DOM 变动的监测。
4.1 监测元素属性变动
上面的示例代码演示了如何应用 MutationObserver 监测元素的属性变动,并在变动产生后进行相应的解决:
// 指标元素
const targetElement = document.querySelector('#target');
// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'attributes') {console.log(` 属性 ${mutation.attributeName} 发生变化 `);
// 执行相应的解决逻辑
}
});
});
// 配置观察器
const config = {attributes: true,};
// 启动观察器
observer.observe(targetElement, config);
在上述代码中,咱们首先抉择了一个指标元素,而后创立了一个 MutationObserver 实例。接下来,咱们配置了观察器,指定咱们要监测的变动类型为属性变动。最初,咱们通过调用 observe
办法,将观察器绑定到指标元素上。
当指标元素的属性发生变化时,MutationObserver 的回调函数将被调用,并传递一个 mutations
参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type
)来判断具体的变动类型,并执行相应的解决逻辑。
4.2 监测子元素的增加或移除
上面的示例代码演示了如何应用 MutationObserver 监测子元素的增加或移除,并在变动产生后进行相应的解决:
// 指标元素
const targetElement = document.querySelector('#target');
// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'childList') {mutation.addedNodes.forEach((addedNode) => {console.log(` 增加了子元素:${addedNode.nodeName}`);
// 执行相应的解决逻辑
});
mutation.removedNodes.forEach((removedNode) => {console.log(` 移除了子元素:${removedNode.nodeName}`);
// 执行相应的解决逻辑
});
}
});
});
// 配置观察器
const config = {childList: true,};
// 启动观察器
observer.observe(targetElement, config);
在上述代码中,咱们创立了一个 MutationObserver 实例,并将观察器配置为监测子元素的增加或移除。当指标元素的子元素产生增加或移除操作时,MutationObserver 的回调函数将被调用,并传递一个 mutations
参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type
)为 childList
来判断子元素的增加或移除操作,并执行相应的解决逻辑。
4.3 监测文本节点的内容变动
上面的示例代码演示了如何应用 MutationObserver 监测文本节点的内容变动,并在变动产生后进行相应的解决:
// 指标元素
const targetElement = document.querySelector('#target');
// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'characterData') {console.log(` 文本节点内容发生变化:${mutation.target.nodeValue}`);
// 执行相应的解决逻辑
}
});
});
// 配置观察器
const config = {characterData: true,};
// 启动观察器
observer.observe(targetElement, config);
在上述代码中,咱们创立了一个 MutationObserver 实例,并将观察器配置为监测文本节点的内容变动。当指标元素的文本节点的内容发生变化时,MutationObserver 的回调函数将被调用,并传递一个 mutations
参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type
)为 characterData
来判断文本节点的内容变动,并执行相应的解决逻辑。
5. MutationObserver 的浏览器兼容性
MutationObserver 曾经在大多数古代浏览器中失去反对,包含 Chrome、Firefox、Safari、Edge 等。然而,思考到一些老旧的浏览器版本,倡议在应用 MutationObserver 之前,查看浏览器的兼容性。
能够通过以下链接查看 MutationObserver 的浏览器兼容性信息:
- Can I use MutationObserver?
6. 总结
MutationObserver 是一个弱小的工具,用于监测 DOM 树的变动。通过 MutationObserver,咱们能够异步地监听 DOM 元素的减少、删除、属性变动等操作,并在发生变化时执行相应的操作。它在动静内容加载、表单验证、响应式布局、自定义组件开发等场景下施展重要作用。本文介绍了 MutationObserver 的属性、利用场景以及应用示例,
7. 参考资料
- MDN Web Docs – MutationObserver
- DOM Living Standard – MutationObserver
- Using Mutation Observers
- DOM Mutation Observers