在某些场景下，我们希望能监视 DOM 树的变动，然后做一些相关的操作。比如监听元素被插入 DOM 或从 DOM 树中移除，然后添加相应的动画效果。或者在富文本编辑器中输入特殊的符号，如 # 或 @ 符号时自动高亮后面的内容等。

要实现这些功能，我们就可以考虑使用 MutationObserver API，接下来阿宝哥将带大家一起来探索 MutationObserver API 所提供的强大能力。

阅读完本文，你将了解以下内容：

  • MutationObserver 是什么；
  • MutationObserver API 的基本使用及 MutationRecord 对象；
  • MutationObserver API 常见的使用场景；
  • 什么是观察者设计模式及如何使用 TS 实现观察者设计模式。

一、MutationObserver 是什么

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

利用 MutationObserver API 我们可以监视 DOM 的变化。DOM 的任何变化，比如节点的增加、减少、属性的变动、文本内容的变动，通过这个 API 我们都可以得到通知。

MutationObserver 有以下特点：

  • 它等待所有脚本任务执行完成后，才会运行，它是异步触发的。即会等待当前所有 DOM 操作都结束才触发，这样设计是为了应对 DOM 频繁变动的问题。
  • 它把 DOM 变动记录封装成一个数组进行统一处理，而不是一条一条进行处理。
  • 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。

二、MutationObserver API 简介

在介绍 MutationObserver API 之前，我们先来了解一下它的兼容性：


相关推荐

JavaScript 启动性能瓶颈分析与解决方案

从零看清Node源码createServer和负载均衡整个过程

【项目实战】sass使用进阶篇(下)

【项目实战】sass使用基础篇(上)

最详细的从零开始配置 TypeScript 项目的教程

5 款非常好用的开源 Docker 工具

WebSocket 全面知识补全

7个处理JavaScript值为undefined的技巧

immutablejs 是如何优化我们的代码的？

Chrome 新功能尝鲜！— CSS Overview

又一个布局利器， CSS 伪类 :placeholder-shown

封装一个vue视频播放器组件

对于组件的可重用性，大佬给出来6个建议

学习 TS 不要错过的八个工具

Node 中的全链路式日志标记及处理

使用 Node 开发服务器项目时如何高效地打日志？

用TypeScript学设计模式(享元模式)

用TypeScript学设计模式(模板方法模式)

TypeScript 设计模式之适配器模式

用TypeScript学设计模式(观察者模式)

用TypeScript学设计模式(单例模式)

点在看的人特别帅/美

lsdyna如何设置set中的node_list_如何监视 DOM 树的变动？相关推荐

  1. lsdyna如何设置set中的node_list_详解MySQL数据库如何实现类似Oracle的序列？

    概述 众所周知,Oracle一般使用序列(Sequence)来处理主键字段,而MySQL则提供了自增长(increment)来实现类似的目的. 不过小编在实际使用过程中发现,MySQL的自增长有诸多的 ...

  2. lsdyna如何设置set中的node_list_如何为3CX配置Gigaset N670 N870 IP PRO

    支持的型号:Gigaset DECT系列和无绳话机 Gigaset DECT系列 Gigaset N670 IP PRO-最低固件版本2.16.2 Gigaset N870 IP PRO-最低固件版本 ...

  3. lsdyna如何设置set中的node_list_为 Windows PowerShell 设置 User Alias （命令别名）

    本文章转自个人博客 https://blog.vvzero.com, 转载请注明出处. 直接看步骤的话,在最下方. 背景 Windows Terminal 虽然还处于预览阶段,但是也出来很长一段时间了 ...

  4. lsdyna如何设置set中的node_list_如何理解vue的双向绑定

    vue前端框架,已经越来越多的在各大小型公司被使用,其相对于其他两大框架的优点是上手容易,数据交互友好,不担心dom操作,渐进式框架适合开发者自己的需求.对于vue来说,最重要的概念无非是数据的双向绑 ...

  5. lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？

    国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...

  6. lsdyna如何设置set中的node_list_如何使用定速巡航功能 图文解说一看就会！

    定速巡航系统可以对车辆进行设置,使车辆以设定的车速恒速行驶.特别是在高速路上长距离行驶时,可以解放驾驶员的右脚,降低驾驶员的疲劳感.同时,由于车辆以恒定的车速行驶,减少了车速的变化,可以有效的提升燃油 ...

  7. lsdyna如何设置set中的node_list_如何安装使用最帅Linux系统监控工具

    作者:Linux迷 链接:https://www.linuxmi.com/netdata-ubuntu.html Netdata是一个免费的开源实时监视和故障排除工具,用于云服务器,容器,应用程序和本 ...

  8. lsdyna如何设置set中的node_list_技术成长日记-Vim-3.Vim中重要的概念

    3.1 配置文件.vimrc或_vimrc .vimrc文件是个人定制Vim的脚本文件,该文件中的每一行都会被当作Ex命令在Vim进行初始化的时候执行.一般在类Unix系统中把该文件存放在$HOME/ ...

  9. lsdyna如何设置set中的node_list_关于如何快速调教NGINX的几点总结

    关于如何快速调教Nginx的几点总结 关于Nginx的好与坏,我觉得没有必要去介绍了,在这里主要分享一下我在实际的项目部署中是如何快速的调教Nginx的.其中分享的源码大家可以作为模板代码,根据自身项 ...

最新文章

  1. 商品领域ddd_DDD领域驱动实战 - 限界上下文（bounded context）
  2. 使用Selenium模拟浏览器，实现自动爬取数据
  3. C++之‘nullptr’ was not declared in this scope
  4. python合并word单元格_python之DataFrame实现excel合并单元格_python
  5. kali root默认密码_Kali Linux root 默认密码是：toor
  6. 干货！639页《深度学习：Deep Learning》硬核课程PPT
  7. java正立三角形_java for循环练习（9*9乘法表、正三角形、菱形）
  8. RS请求错误之RSV-BBP-0028
  9. 记录淘宝里的点点滴滴
  10. [机器学习]模型评估指标：ROC/AUC，KS，GINI，Lift/Gain, PSI 总结
  11. 移动端300ms延迟的由来及解决方案
  12. 调用新浪网址缩短服务生成网址短链接
  13. Mqtt精髓系列之精简之道
  14. linux mv命令例子,linux命令mv
  15. HyperLynx（八）带状线串扰的仿真
  16. BZOJ 2901: 矩阵求和
  17. Windows消息拦截技术的应用（Hook钩子）
  18. eemd优缺点_一种改进的EEMD方法及其应用研究
  19. ipad文献管理软件_Mac上四款常用的文献管理软件，哪款适合你?
  20. 【NOI OJ】18 Tomorrow never knows？（未知的明天）

热门文章

  1. C#+Arduino使用红外遥控器
  2. ios 按钮文字下划线_iOS 文字下划线
  3. CPU的设计与实现(2)--逻辑电路设计
  4. STM32F4xx时钟配置的三种方法
  5. html 地址 点击召唤高德,HTML5创建高德地图
  6. 各类大屏展示模板分享
  7. 2020-11-04编译器下载安装及使用
  8. 最新的服务器cpu有国产的吗,浪潮发布国产飞腾CPU服务器 已达业界主流水平
  9. 工作站 显卡 测试软件,绝对专业！14块工作站显卡测试（图）
  10. 实现 3D 时间动画展示效果