JavaScript是如何工作的：使用MutationObserver跟踪DOM的变化

最新推荐文章于 2024-12-03 08:07:35 发布
最新推荐文章于 2024-12-03 08:07:35 发布
阅读量2.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 JavaScript 文章标签： JavaScript MutationObserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Fundebug/article/details/86213390

摘要： 掌握MutationObserver。

Fundebug经授权转载，版权归原作者所有。

这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇。

如果你错过了前面的章节，可以在这里找到它们：

Web 应用程序在客户端变得越来越重，原因很多，例如需要更丰富的 UI 来容纳更复杂的应用程序提供的内容，实时计算等等。复杂性的增加使得在 Web 应用程序生命周期的每个给定时刻都很难知道 UI 的确切状态。

而当你在搭建某些框架或者库的时候，甚至会更加困难，例如，前者需要根据 DOM 来作出反应并执行特定的动作。

概述

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个 <li>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在 1000 个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer有以下特点：

  • 它等待所有脚本任务完成后，才会运行，即采用异步方式
  • 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条地个别处理 DOM 变动
  • 它即可以观察发生在 DOM 节点的所有变动，也可以观察某一类变动

为什么要要监听 DOM？

在很多情况下，MutationObserver API 都可以派上用场。例如:

  • 你希望通知 Web 应用程序访问者，他当前所在的页面发生了一些更改。
  • 你正在开发一个新的 JavaScript 框架，需要根据 DOM 的变化动态加载 JavaScript 模块。
  • 也许你正在开发一个所见即所得(WYSIWYG) 编辑器，试图实现撤消/重做功能。通过利用 MutationObserver API，你可以知道在任何给定的点上进行了哪些更改，因此可以轻松地撤消这些更改。

这

最低0.47元/天 解锁文章
JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化
weixin_33943836的博客
01-09 305
这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇。 如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！ JavaScript 是如何工作的：内存管理+如何处理4个常见的...
JavaScript 中的 MutationObserver
最新发布
qq_43730272的博客
02-19 589
JavaScript 中的 MutationObserver 是用于异步观察 DOM 变化的接口，能够监控节点的添加、移除、属性修改等操作。获取原始文本：使用 nodeValue 获取节点的文本内容，并去除前后空格。检查节点类型：如果节点是文本节点。
JS应用：MutationObserver
weixin_43988567的博客
07-05 468
【代码】JS应用：MutationObserver。
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 8570
目录 1 变动观察器（mutation observer）概述 2 MutationObserver构造函数 3 Mutation Observer实例的方法 3.1 observe() 3.2 disconnect()，takeRecords（） 3.3 MutationRecord对象 4 应用示例 4.1 子元素的变动 4.2 属性的变动 4.3 取代DOMContent...
JavaScript DOM 变动观察器（Mutation observer）
爱蹦跶的全栈大A阿
02-12 1899
DOM 变动观察是 web 开发中的一个重要概念，指的是监视 DOM 元素的变化。传统的 DOM 事件可以用于响应某些特定的 DOM 变动，例如点击、鼠标移入移出等。然而，这些事件无法满足所有场景的需求，例如无法监视 DOM 元素的添加、删除、修改等操作。是浏览器提供的一个 API，用于解决 DOM 变动观察问题。它可以监视 DOM 树的任何部分，包括子元素、属性和文本内容，并在发生变化时触发回调函数。理解 MutationObserver的工作原理和应用场景，对于开发人员来说至关重要。
突变摘要：JavaScript库实现DOM更改的高效观察
传统的监听DOM变化的方式，例如使用MutationObserver或旧版的Mutation Events，可能会导致性能问题和代码复杂性增加。突变摘要库提供了一种更为高效和简便的方法来跟踪这些变化。 2. 突变摘要（Mutation Summary）...
FocusObserver:简化ShadowDOM文档焦点变化观察
- MutationObserver：是一种API，用于在DOM变化时异步接收通知。它被设计为观察DOM树的变化，例如元素被插入或删除，属性被修改等。FocusObserver正是借鉴了此模型，提供对焦点变化的监听。 - 可访问性...
jQuery插件实现DOM变更快速观察：mutation-summary封装器
综上所述，我们可以了解到该jQuery插件是一个专门用于观察和摘要DOM变化的工具，其工作方式基于浏览器提供的MutationObserver API，通过包装该API，简化了在使用jQuery时对DOM变化的监听和管理。它提供了一种简便的...
解决IE11中MutationObserver删除节点问题的JavaScript Shim
这个属性在某些场景下对于跟踪DOM的变化非常重要。 4. IE 11浏览器兼容性问题 IE 11（Internet Explorer 11）是微软公司开发的一款相对较旧的浏览器，它的最新版本在2021年被宣布不再支持。在使用现代Web API时，...
JavaScript — MutationObserver接口
旧梦
08-14 463
介绍 MutationObserver 接口提供了监视对 DOM 树所做更改的能力。 MutationObserver()，创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。 使用 写一个简单的例子，监听页面上 input 的显示与隐藏 <body> <input id="input" /> <button id="hide">隐藏</button> <button id="show"&gt
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
学Java，找哪吒
03-24 6118
目录一、MutationObserver接口二、MutationObserver基本用法1、observe()方法2、回调与MutationRecord3、disconnect()方法4、复用MutationObserver三、MutationObserverInit与观察范围四、异步回调与记录队列五、性能、内存与垃圾回收1、 MutationObserver的引用2、MutationRecord的引用 一、MutationObserver接口 不久前添加到DOM规范中的MutationObserver接口
JS MutationObserver 笔记
ShadowWonder的博客
08-17 1446
参考MDN手册;缘由最近一直学探究一下前端MVC的原理，所以有空便去看看vue.js的源码。无意间发现的它的一个核心工作原理。MutationObserver官网介绍这个东西可以检测DOM变化，它是用来取代 Mutation Events 的。 大概用法如下: var target = document.querySelector('body'); var obser
MutationObserver 用法总结( 监听节点、DOM变化 )
热门推荐
weixin_45412353的博客
07-07 2万+
一、认识MutationObserver 今天在查看Event Loop相关的文章的时候，看见了MutationObserver类，然后自己看了一下，在这做下总结 MutationObserver：原生api中用来监听node节点变化的一个类，用来代替Mutation Events 我们先来看看MutationObserver中有哪些方法 我们使用dir函数输出一下 我们可以看到MutationObserver中有三个方法，我们一一来看 observe observe(target, config)
深入理解 JavaScript 的 MutationObserver API
xiaohua0708day的博客
12-03 1499
试试在你的项目中使用它，为用户带来更好的体验吧！- **`type`**: 变化类型（`attributes`、`childList`、`characterData`）。- **`addedNodes` 和 `removedNodes`**: 子节点变化时的新节点和旧节点列表。### **三、基础示例**#### **1. 监听子节点的添加和移除**- **`attributeFilter`**: 限制只监听特定的属性。- **`attributeName`**: 属性变化时的属性名称。
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
RenGJ010617的博客
09-16 8420
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
javascript基础学习系列四百一十八：MutationObserver 接口
wanmeijuhao的博客
02-06 491
回调与 MutationRecord每个回调都会收到一个 MutationRecord 实例的数组。因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的 MutationRecord 实例的数组。这个方法接收两个必需的参数：要观察其变化的 DOM 节点，以及一个 MutationObserverInit 对象。执行以上代码后，元素上任何属性发生变化都会被这个 MutationObserver 实例发现，然后就会异步执行注册的回调函数。observe()方法。
MutationObserver 监视 DOM 树改变的api
呆呆狗
11-26 2504
是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。
MutationObserver的使用详解
HGX-DJK
06-30 403
是一个用于监听 DOM 变化的 JavaScript 对象，可以检测到 DOM 树中的添加、移除、属性变化或文本内容变化。它提供了一种更高效和灵活的方式来观察 DOM 变化，而不需要反复轮询 DOM 节点的状态。通过实例化 MutationObserver 对象，并传入一个回调函数，当 DOM 发生变化时，该回调函数会被调用。使用一个包含配置选项的对象，来指定希望监听哪些类型的 DOM 变化。调用 observe 方法，并传入要观察的目标节点和观察选项。通过回调函数获取变动记录，并对其进行处理。
MutationObserver的示例代码的使用(附示例代码)
白的夜的博客
01-21 1415
首先先介绍一下MutationObserver的特点1.MutationObserver的回调属于微队列2.它会在触发指定 DOM 事件时，调用指定的回调函数，说白了就是用来检测DOM节点的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值