Dom-api MutationObserver使用方法详解
概述
MutationObserver是Web API中的一个对象，用于监视DOM树中发生的变化，并提供回调函数，用于在变化发生时执行相应逻辑。
基本用法
MutationObserver的基本用法如下
// 创建一个观察器实例并指定回调函数
const observer = new MutationObserver(function(mutationsList, observer) {
// 逻辑处理
});
// 选中需要观察的目标节点
const targetNode = document.querySelector('#target');
// 配置观察器选项
const config = { attributes: true, childList: true, subtree: true };
// 将目标节点与观察器实例链接起来并开始观察
observer.observe(targetNode, config);
// 观察结束
observer.disconnect();
参数说明
mutationsList: 对所监视的节点树所做的更改组成的MutationRecord对象数组。observer: 观察器实例本身
在调用 observe 方法时，该方法会返回一个 MutationObserver 对象，该对象提供了 disconnect 方法，用于断开当前 observer 对象与观察对象的联系，停止观察。
配置选项
attributes: 是否监控目标节点的属性变化childList: 是否监控目标节点的子节点变化subtree: 是否监控目标节点所有子树中的节点变化
MutationRecord对象
MutationRecord 对象，代表单个变化。它包含以下属性：
- type：记录发生的变化类型，有三种类型："attributes"，"childList"和"characterData"
- target：发生变化的节点对象
- addedNodes：如果有新的节点被添加，则该属性包含一个 NodeList 对象
- removedNodes：如果有新的节点被删除，则该属性包含一个 NodeList 对象
- previousSibling：发生变化的节点的前一个兄弟节点
- nextSibling：发生变化的节点的后一个兄弟节点
- attributeName：发生变化的属性名
- oldValue：发生变化的属性或文本节点的旧值
示例
下面有两个例子，用于解释如何使用MutationObserver 对象。
示例 1
此例用于监控指定元素节点的属性变化。
<body>
<div id="target" class="red" style="font-size: 12px;">Hello World</div>
<script type="text/javascript">
const targetNode = document.querySelector('#target');
const observer = new MutationObserver(function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log(`属性 ${mutation.attributeName} 的值由 ${mutation.oldValue} 变为 ${mutation.target.getAttribute(mutation.attributeName)}`);
}
}
});
observer.observe(targetNode, { attributes: true, attributeOldValue: true });
</script>
</body>
示例 2
此例用于监控指定元素节点的子节点变化。
<body>
<ul id="target">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script type="text/javascript">
const targetNode = document.querySelector('#target');
const observer = new MutationObserver(function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log(`变化类型为 ${mutation.type}，节点 ${mutation.target.nodeName} 的子节点 ${mutation.addedNodes[0].nodeName} 被添加或删除`);
}
}
});
observer.observe(targetNode, { childList: true });
</script>
</body>
总结
本篇文章主要介绍了DOM-api中MutationObserver的使用方法，以及相关参数和示例，希望能够帮助读者更深入的了解和应用此对象。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Dom-api MutationObserver使用方法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 