在某些场景下，我们希望能监视 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学设计模式(单例模式)
点在看的人特别帅/美
