MutationObserver

发表于 2023-11-24 分类于技术阅读次数： Changyan：本文字数： 817 阅读时长 ≈ 1 分钟

MutationObserver 用于观察DOM的任何变动

但是DOM的变动是同步的，而此方法是异步微任务

构造函数

/**
 * @param {MutationRecord} Array 变动数组
 * @param {obInstance} Object observer实例
*/
const observer = new MutationObserver((MutationRecord, obInstance)=> {
    console.log(MutationRecord)  
    console.log(obInstance)
})

实例方法

1. observe

/**
 * @param {node} DOMnode dom节点
 * @param {options} Object 配置对象
*/
observer.observe(node, options?)

options：

{
    attributes: true,   // 监控 属性变化
    characterData: true,    // 监听 声明的 target 节点上所有字符的变化
    childList: true,    // 监听 target 节点中发生的节点的新增、删除与修改, 包括innerText
    subtree: true,      // 监听 作用于该节点的整个子树
    // attributeOldValue: true,    //是否需要记录变动前的属性值
    // characterDataOldValue: true  //是否需要记录变动前的属性值
}

注意：

childList 所指的子节点包括文本内容也是一个节点

2. disconnect

observer.disconnect()
停止监听

3. takeRecords

observer.takeRecords 用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。