监听DOM上某一个元素是否发生变化，利用MutationObserver来监听元素变化

最新推荐文章于 2025-05-19 14:32:31 发布

转载最新推荐文章于 2025-05-19 14:32:31 发布 · 883 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lwkai/blog/3003359

文章标签：

#java

为什么80%的码农都做不了架构师？>>>

/**
 * 观察DOM是否发变化的事件
 * @type {MutationObserver|*}
 */
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var element = document.getElementById('publicHead');

var callback = function (records){
    records.map(function(record){
        console.log('Mutation type: ' , record.type);
        console.info('Mutation target: ' , record.target);
    });
};

var mo = new MutationObserver(callback);

var option = {
    'childList' : true,
    'subtree' : true
};

mo.observe(element, option);
// 停止观察
//mo.disconnect();


// 追加一个DIV进去，看看触发的事件
var el = document.createElement('div');
el.innerHTML = '<p>东奔西走<br/><br/>';
element.appendChild(el);

页面上的HTML代码：

<html>
<head></head>
<body>
<div id="publicHead"></div>
</body>
</html>

本人微信：本人QQ：

转载于:https://my.oschina.net/lwkai/blog/3003359

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33967071

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JS `MutationObserver`：监听 DOM 树变化，实现高性能 DOM 监控

weixin_41455464的博客

07-20

923

定时轮询或者直接在 DOM 操作的地方埋点，虽然能实现功能，但性能实在不敢恭维。在前端开发中，我们经常需要监控 DOM 树的变化，比如某个元素被添加、删除、属性被修改等等。是一个 API，它允许你监听 DOM 树的变化，并在变化发生时异步地执行回调函数。别看它名字挺唬人，其实用起来一点都不难，而且性能杠杠的，能让你的 DOM 监控飞起来！就像一位训练有素的忍者，只有在 DOM 真正发生变化时才会现身，告诉你发生了什么。时，也要注意性能优化，避免过度监听，及时停止观察。的用法，并在实际开发中灵活运用。

使用Mutation Observer监听DOM变化（也许是最完全指南？）

百岁如流富贵冷灰的博客

12-07

4561

前言打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。正题众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。介绍

参与评论您还未登录，请先登录后发表或查看评论

MutationObserver - 监听Dom变化

weixin_43408330的博客

04-24

1461

监听DOM变化（属性变动、目标子节点变化、观察后代节点等）

MutationObserver监听 DOM 树变化

__猫玖__的博客

05-19

424

MutationObserver 是一个用于监听 DOM 树变化的接口，能够观察一个或多个 DOM 元素的变化，并在变化发生时执行回调函数。通过配置观察选项，可以监听子节点或所有后代节点的变化。在示例中，MutationObserver 被用于监听 #container 元素的变化，当用户点击按钮添加或移除段落时，回调函数会检测到这些变化，并输出新增或移除的节点信息。这种机制适用于需要动态响应 DOM 结构变化的场景。

MutationObserver监听DOM变化

黄彪博客

02-15

2092

文章目录一、参考二、快速入门三、MutationObserver相关对象和方法3.1 MutationObserver3.2 MutationObserver.observe()3.3 MutationObserverInit四、经典案例4.1 MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback。4.2 如何模拟添加节点？一、参考 MutationObserver MDN MutationObserver observe() MDN

MutationObserver 监听DOM变化

窝儿卡母Here~

06-28

2591

MutationObserver 监听DOM变化

JavaScript监听一个DOM元素大小变化

11-21

本文主要介绍一种利用iframe元素监听DOM大小变化的方法。首先，我们来看需求场景：比如你用HTML5的canvas绘制了一张图表，当canvas元素的尺寸发生变化时，为了保持图表的正确显示，需要重新绘制其内容。JavaScript...

监听dom变化-Mutation observers

weixin_42733155的博客

11-07

2331

一、背景通常，为了响应某个变化而执行一段逻辑，我们可以将这段逻辑的调用，放在这个变化的入口或者出口。所谓入口，是指这个变化发生的源头，所谓出口，是指这个变化发生之后走的逻辑。这么说可能比较抽象，举个例子，页面上有个输入框，用户可以输入数字，也可能是通过后端推送的websocket更改输入框的数字，我们要在数字变化的时候触发个逻辑。有两种选择，一是入口。因为改变数字的原因，我们全都知道，所以可以监听输入框的Input事件，在这个事件里面触发对应的逻辑，同时在websocket的回调里触发对应的逻辑，此

jquery监听div内容的变化具体实现思路

10-26

这个watch()方法通过setInterval设置一个定时器，每隔100毫秒检查一次指定ID的元素内容是否发生变化。如果内容发生了变化，则调用传入的函数，执行相应的操作。文章中还提到了如何创建一个特殊的事件type，即...

MutationObserver 监听 DOM 变化

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-06

1268

在性能方面，我们需要注意不要过度监听 DOM 的变化，特别是那些频繁变化的元素。它比传统的事件监听器更加灵活，因为它可以监听到任意类型的 DOM 变化，包括元素的添加、删除、属性的修改等。在 Web 开发中，我们经常会遇到需要监听 DOM 元素的变化以响应某些行为的情况。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）学习路线(点击解锁）

MutationObserver监听dom的改动

qq_39454432的博客

04-08

328

MutationObserver监听dom变动

使用 MutationObserver 监测 DOM 变化

05-22

807

是现代浏览器提供的用来检测 DOM 变化的网页接口。你可以使用这个接口来监听新增或者删除的节点，属性更改，或者文本节点的内容更改。可以干点啥好呢？你可以在以下几种情况信手拈来 MutationObserver 接口。通知用户当前所在的页面所发生的一些变化。通过使用一些新的很棒的 JavaScript 框架来根据 DOM 的变化来动态加载 JavaScript 模块。

利用Mutation Observer API用来监听dom的变动

weikehang的博客

05-23

409

//Mutation Observer API用来监听dom的变动。dom变动之后立即触发相应的事件、 //dom触发之后不会立即执行，需要等到所有的dom元素更新后才会执行回调函数 //而且只会触发一次 /** * * @type {MutationObserver} 实例的回调函数 *...

监听元素的变化

weixin_34190136的博客

07-26

874

在项目中，遇到监听其中一个元素的变化，来进行动态变化其他元素的要求，百度到都是window.onresize，没找到对单个元素的监听，下面是大牛推荐的方法: MutationObserver var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutatio...

监听dom变化的方法 - MutationObserver-基本使用

weixin_43856422的博客

11-16

1819

但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。对一个节点添加观察器，就像使用addEventListener方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。用来清除变动记录，即不再处理未处理的变动。

MutationObserver实时监控dom的变化

Coco_998的博客

10-19

850

MutationObserver用来监视 DOM 变动。

监听dom的属性改变

weixin_45805459的博客

05-23

551

监听dom

JS_监听dom变化触发，new MutationObserver

小歪博客

05-08

738

3.异步处理变化：MutationObserver 使用异步机制来处理 DOM 变化，这意味着当变化发生时，不会立即触发回调函数，而是在当前 JavaScript 执行完成后才会执行回调函数。2.捕获变化类型：MutationObserver 可以捕获多种类型的 DOM 变化，包括添加或删除节点、属性变化、文本内容变化等等。如果未指定，则监测所有属性的变化。MutationObserver 是一个用于监测 DOM 变化的接口，它提供了一种机制来异步观察在特定元素或文档中发生的 DOM 变化。

vue3如何监听一个dom元素里面文字内容的变化