MutationObserverAPI--微任务
2021-03-21 08:23
标签：element rom rds type obs cal web rda 方法 MutationObserverAPI可以看作一个监听DOM任何变化事件的WebAPI。 和普通的监听函数不同的是，MutationObserverAPI的监听是一个异步任务，在DOM操作完成后触发。 DOM变化：包含节点、属性、文本内容的变动。 MutationObserver，顾名思义，是变化观察器。它是一个构造函数，使用时需要创建实例对象，生成一个观察器。 DOM变化会产生一条变化记录，它是一个MutationRecord对象的实例。 上面的mutations是MutationRecord实例对象的一个集合。 它包含以下属性： MutationObserver.prototype.observe是一个实例方法，用来启动监听器，并指定监听对象，设置监听参数。 所以该方法的调用一定要在所有的DOM操作的最上方，否则监听不到变化。 element: 监听的DOM对象 options： 指定观察的具体内容：（3个至少指定一个，否则报错）对应的值都是布尔值。 1. childList (子节点) 还有对应该配置的补充配置：subtree，指定是否是所有的后代节点 2. attributes (属性) 还有对应该配置的补充配置： attributeOldValue:指定是否记录观察前的属性值 attributeFilter: 一个数组，指定观察的属性值 3. charactorData(节点内容) 还有对应该配置的补充配置： charactorDataOldValue： 指定是否记录变化前的节点内容 示例： 1.disconnect() 该方法调用后，关闭监听 2.takeRecords() 删除未处理的变化 1. 观察节点和属性的变化 2.取代DOMContentLoaded事件 MutationObserverAPI--微任务 标签：element rom rds type obs cal web rda 方法 原文地址：https://www.cnblogs.com/lyraLee/p/11827285.html1. 作用
const observer = new MutationObserver(function (mutations, observer) {
console.log(mutations);//[{type: ‘childList‘,.....}]
})
observer.observe(root, {
childList: true,
subtree: true
})
const p = Promise.resolve();
root.appendChild(document.createElement(‘div‘));
// DOM操作执行完成，触发观察回调
p.then(() => {
console.log(‘d‘)
})
// 运行结果
d
[{type: .......}]
2. 使用
// callback是监听回调函数，当主执行栈结束后触发
// 第一个参数是所有变化产生的变化对象的一个数组，第二个参数是观察器本身
const observer = new MutationObserver(function(mutations, observer) {
});
target: 当前变化的节点
type: 变化类型；包含charactorData,childList, attributes三种
addNodes: 新增的节点； 默认[]
removeNodes: 删除的节点;默认[]
previousSibling: 前一个同级节点； 默认null
nextSiblings: 后一个同级节点；默认null
attributeName: 发生变化的属性
oldValue: 变化前的值
observer.observer(element, options);
3. 实例方法
4. 应用
文章标题：MutationObserverAPI--微任务
文章链接：http://soscw.com/index.php/essay/67084.html