MutationObserver详解
MutationObserver用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。
但是,它与事件有一个本质不同:事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;Mutation Observer 则是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发。
Mutation Observer 有以下特点:
- 它等待所有脚本任务完成后,才会运行(即异步触发方式)。
- 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。
- 它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。
MutationObserver 构造函数
var observer = new MutationObserver(function (mutationRecoards, observer) {// mutationRecoards变动数组// observer 观察者实例
});
构造函数接收一个回调函数,回调函数有两个参数,一个变动数组,第二个是观察者实例。
MutationObserver 的实例方法
1. observe(node, config)
启动监听,它接受两个参数。
第一个参数:所要观察的 DOM 节点
第二个参数:一个配置对象,指定所要观察的特定变动
配置对象如下:
- childList:子节点的变动(指新增,删除或者更改)。
- attributes:属性的变动。
- characterData:节点内容或节点文本的变动。
- subtree:布尔值,表示是否将该观察器应用于该节点的所有后代节点。
- attributeOldValue:布尔值,表示观察attributes变动时,是否需要记录变动前的属性值。
- characterDataOldValue:布尔值,表示观察characterData变动时,是否需要记录变动前的值。
- attributeFilter:数组,表示需要观察的特定属性(比如[‘class’,‘src’])。
// 开始监听文档根节点(即<html>标签)的变动
mutationObserver.observe(document.documentElement, {attributes: true,characterData: true,childList: true,subtree: true,attributeOldValue: true,characterDataOldValue: true
});
对一个节点添加观察器,就像使用addEventListener方法一样,多次添加同一个观察器是无效的,回调函数依然只会触发一次。但是,如果指定不同的options对象,就会被当作两个不同的观察器。
2. disconnect()
disconnect方法用来停止观察。调用该方法后,DOM 再发生变动,也不会触发观察器。
3. takeRecords()
用来清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。
MutationRecord 对象
DOM 每次发生变化,就会生成一条变动记录(MutationRecord 实例)。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。
MutationRecord对象包含了DOM的相关信息,有如下属性:
- type:观察的变动类型(attribute、characterData或者childList)。
- target:发生变动的DOM节点。
- addedNodes:新增的DOM节点。
- removedNodes:删除的DOM节点。
- previousSibling:前一个同级节点,如果没有则返回null。
- nextSibling:下一个同级节点,如果没有则返回null。
- attributeName:发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性。
- oldValue:变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null。
例子
<div id="container"><div class="child"></div></div><button id="update">改变</button><script>var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserverconst container = document.getElementById('container')const button = document.getElementById('update')const options = {attributes: true,childList: true,}// 创建MutationObserver实例,返回一个观察者对象const mutation = new MutationObserver(function(mutationRecoards, observer) {console.log(mutationRecoards)console.log(observer)})// 对观察者添加需要观察的元素,并设置需要观察元素的哪些方面mutation.observe(container, options);// 对container进行操作button.addEventListener('click', function() {container.innerText = '这是文本'; // 内容改变container.style.background = 'red'; // 属性改变for (let i = 0; i < 3; i++) { // 子节点container.appendChild(document.createElement('div'))}})</script>
参考
Mutation Observer API
MutationObserver详解相关推荐
- JavaScript 运行机制详解(理解同步、异步和事件循环)
1.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- Quill编辑器操作实例详解
今天分享下"Quill编辑器操作实例详解"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. ...
- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言 本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」 难度 ...
- vue 声明周期函数_Vue 生命周期详解
Vue 生命周期详解 Vue 生命周期流程 最开始,用户使用 new Vue() 创建根 Vue 实例,或者 Vue 实例化子组件都会调用_init方法(我们将这两种实例都称为vm): functio ...
- 详解浏览器和Node的事件循环机制及区别
关于事件循环机制(详解) 前言 一.浏览器的事件循环机制 二.Node的事件循环机制 三.两者的区别 前言 JS是单线程的脚本语言,即在同一时间只能做一件事.为了协调时间.用户交互.脚本.UI渲染和网 ...
- 【面试题】973- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言 本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」 难度 ...
- 最全的 Vue 面试题+详解答案
前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue ...
- 从命令行到IDE,版本管理工具Git详解(远程仓库创建+命令行讲解+IDEA集成使用)
首先,Git已经并不只是GitHub,而是所有基于Git的平台,只要在你的电脑上面下载了Git,你就可以通过Git去管理"基于Git的平台"上的代码,常用的平台有GitHub.Gi ...
最新文章
- CodeGen结构循环回路
- 第七届全国大学生智能汽车竞赛获奖名单
- python编写异常处理_Python 简明教程 --- 23,Python 异常处理
- Oracle 11g R2 RAC 高可用连接特性
- WinAPI: GetLogicalDrives - 判断系统中存在的逻辑驱动器
- c语言 在线oj系统,开源的在线评测系统——Vakuum
- C++基础知识(二)—— 变量和数据类型
- 4.1)深度卷积网络:卷积神经网络基础
- 轻轻的你来了,悄悄的你走了,邓总没有带走一个bug
- ps导出gif颜色不对_PS基础知识(1)
- 关于MATLAB2014b不能并行计算的原因及解决方法
- TensorFlow官方发布剪枝优化工具:参数减少80%,精度几乎不变
- 《皇帝新脑》读书笔记(一)
- 集合涉及到的排序方式
- 如何让Ubuntu联网
- bmp怎么改jpg格式?
- python听不懂_看日本电影真痛苦,本来就听不懂!还没字幕!6行代码音频转文字...
- [华为][Atlas]Ubuntu can‘t open file ‘/usr/lib/python3.7/py_compile.py解决办法总结
- 【Tableau Desktop 企业日常技巧16】Tableau下载和安装ODBC驱动 连接MySQL方法及过程详解
- 红心大战c语言程序设计,Win 7系统安全优化、瘦身攻略(2)