LS-DYNA中如何设置SET中的NODE_LIST：如何监听DOM树的变动？

在某些场景下，我们希望能监视 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学设计模式(单例模式)

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删