2024年4月4日发(作者：)
mutationobserver用法 dom
MutationObserver用法 DOM
MutationObserver是JavaScript中的一个API，用于
监视DOM树的变化，并在变化发生时执行相应的回调函
数。MutationObserver为开发人员提供了一种更灵活和高
效地检测和响应DOM变化的方式，以替代传统的事件监听
方法。
1. MutationObserver的基本用法 MutationObserver
的基本用法非常简单，首先我们需要创建一个
MutationObsever对象，并传入一个回调函数作为参数。回
调函数会在DOM发生变化时被调用。我们可以在回调函数
中进行相应的处理。
```javascript // 创建一个MutationObserver对象
const observer = new MutationObserver(callback);
// 配置观察选项 const options = { // 观察子节
点的变化 childList: true, // 观察属性的变化
attributes: true, // 观察子节点的属性变化
attributeOldValue: true, // 观察文本节点的变化
characterData: true, // 观察子节点的文本节点变化
characterDataOldValue: true, // 观察断开的节点
subtree: true, };
// 启动观察 e(target, options);
// 回调函数 function callback(mutationsList,
observer) { // 遍历所有变动的mutation for (let
mutation of mutationsList) { // 处理相应的变动
(, ,
ue); } }
// 停止观察 nect(); ```
2. 观察选项配置 MutationObserver的观察选项配置
对象可以设置以下属性：
- childList：是否观察子节点的变化，默认为
false。 - attributes：是否观察属性的变化，默认为
false。 - attributeOldValue：是否在变化发生时记录属
性的上一个值，默认为false。 - characterData：是否观
察文本节点的变化，默认为false。 -
characterDataOldValue：是否在变化发生时记录文本节点
的上一个值，默认为false。 - subtree：是否观察断开的
节点节点变化，默认为false。
3. MutationRecord对象 当DOM发生变化时，
MutationObserver回调函数的参数会接收一个
MutationRecord对象，它包含了DOM变化的详细信息。
MutationRecord对象具有以下属性：
- type：表示变化类型的字符串。 - target：发生变
化的节点。 - addedNodes：新增的节点，是一个节点列
表。 - removedNodes：移除的节点，是一个节点列表。 -
previousSibling：前一个同级节点。 - nextSibling：下
一个同级节点。 - attributeName：发生变化的属性名
称，在attributes变化时使用。 -
attributeNamespace：变化属性的命名空间，在
attributes变化时使用。 - oldValue：在变化发生时的上
一个值，在属性变化时使用。
4. 实际应用示例 下面是一个实际应用示例，我们通
过MutationObserver监听一个元素的子节点变化，实时更
新子节点的数量：
```javascript const targetElement =
mentById('target'); const
countElement = mentById('count');
// 创建一个MutationObserver对象 const observer
= new MutationObserver(callback);
// 观察选项配置对象 const options =
{ childList: true, };
// 启动观察 e(targetElement,
options);
// 回调函数 function callback(mutationsList,
observer) { // 获取当前子节点的数量 const count
= ; // 更新子节点
数量 ntent = `子节点数量：
${count}`; }
// 停止观察 nect(); ```
在上述示例中，我们通过MutationObserver监听了一
个id为"target"的元素的子节点变化，并在回调函数中实
时更新id为"count"的元素的文本内容，显示当前子节点
的数量。
总结 MutationObserver是一个非常强大和灵活的工
具，可以用于监视DOM的变化。它可以监听DOM树中几乎
所有的变动，并在变动发生时执行相应的回调函数。
MutationObserver的用法非常简单，只需要创建一个
MutationObserver对象，并通过观察选项配置对象设置观
察的类型，然后在回调函数中处理相应的变动即可。通过
使用MutationObserver，开发人员可以更高效、优雅地监
听和响应DOM的变化。
发布评论