MutationObserverAPI--微任务
1. 作用
MutationObserverAPI可以看作一个监听DOM所有变化(包含节点、属性、文本内容的变动)的接口。
和EventTargetAPI的addEventListener相比:
共同点: 两者的回调函数执行都是异步任务,都要在主执行栈之后执行;
不同点:
1. addEventListener的回调函数会进入宏任务队列;
MutationObserver的回调函数会进入微任务队列
2.addEventListener的触发方式是同步触发;比如,点击后,回调函数立即进入宏任务队列。
MutationObserver的监听是异步触发,在所有的DOM操作完成后才触发使回调函数进入微任务队列。
比如,程序中有10个修改DOM的操作,只有在第十个处理完之后,回调函数才进入微任务队列。
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. 使用
MutationObserver,顾名思义,是变化观察器。它是一个构造函数,使用时需要创建实例对象,生成一个观察器。
// callback是监听回调函数,当主执行栈结束后触发
// 第一个参数是所有变化产生的变化对象的一个数组,第二个参数是观察器本身
const observer = new MutationObserver(function(mutations, observer) {
});
DOM变化会产生一条变化记录,它是一个MutationRecord对象的实例。
上面的mutations是MutationRecord实例对象的一个集合。
它包含以下属性:
target: 当前变化的节点
type: 变化类型;包含charactorData,childList, attributes三种
addNodes: 新增的节点; 默认[]
removeNodes: 删除的节点;默认[]
previousSibling: 前一个同级节点; 默认null
nextSiblings: 后一个同级节点;默认null
attributeName: 发生变化的属性
oldValue: 变化前的值
MutationObserver.prototype.observe是一个实例方法,用来启动监听器,并指定监听对象,设置监听参数。
所以该方法的调用一定要在所有的DOM操作的最上方,否则监听不到变化。
observer.observer(element, options);
element:
监听的DOM对象
options:
指定观察的具体内容:(3个至少指定一个,否则报错)对应的值都是布尔值。
1. childList (子节点)
还有对应该配置的补充配置:subtree,指定是否是所有的后代节点
2. attributes (属性)
还有对应该配置的补充配置:
attributeOldValue:指定是否记录观察前的属性值
attributeFilter: 一个数组,指定观察的属性值
3. charactorData(节点内容)
还有对应该配置的补充配置:
charactorDataOldValue: 指定是否记录变化前的节点内容
示例:
<div id="root"></div>
<script type="module">
const observer = new MutationObserver(function (mutations, observer) {
console.log(mutations);//[{type: 'childList',.....}]
})
observer.observe(root, {
childList: true,
subtree: true
})
root.appendChild(document.createElement('div'))
</script>
3. 实例方法
1.disconnect()
该方法调用后,关闭监听
2.takeRecords()
删除未处理的变化
4. 应用
1. 观察节点和属性的变化
2.取代DOMContentLoaded事件
最新文章
- C#-面向对象的三大特性——封装(封装成员变量、封装成员方法)
- 带你走进rsync的世界
- java 滤镜实现
- sasscore学习之_mixin.scss
- WordPress博客系统搜索引擎优化seo全攻略方法
- SpringMVC + Spring + MyBatis 学习笔记:提交数据遭遇基础类型和日期类型报400错误解决方法
- HTML5表单增强
- 计算机网络之文件传送协议FTP
- MSSql-1内部数据库版本号
- Java能不能通过代码干预Java垃圾回收
- 视频人脸检测——Dlib版(六)
- EOS智能合约开发(一):EOS环境搭建和启动节点
- gj12-2 协程和异步io
- mac下安装启动Mongodb
- js有关数组的函数
- Install-Package:QRCoder已拥有为System.Drawing.Common定义的依赖项
- WCF小问题总汇
- sysv-rc-conf介绍
- SessionListener失败,退出
- Servlet 点击计数器
热门文章
- 从零开始学Flask框架-004
- PAT(B) 1079 延迟的回文数(Java)
- PAT(B) 1059 C语言竞赛(C)
- 转换器1:ThinkPhp模板转Flask模板
- errgroup 分析
- Java基础IO类之字节数组流
- Kubernetes 学习笔记(二):本地部署一个 kubernetes 集群
- Centos7+puppet+foreman,模板介绍
- 在论坛中出现的比较难的sql问题:30(row_number函数 物料组合问题)
- 你不知道的JSON.stringify知识点