javascript 监听DOM内容改变事件

最新推荐文章于 2024-07-16 20:08:38 发布
最新推荐文章于 2024-07-16 20:08:38 发布
阅读量1.6w 收藏 24
点赞数 18
分类专栏： javascript 文章标签： DOM内容改变监听 DOM改变事件 MutationObserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013350495/article/details/90755115
版权

效果演示：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript监听DOM内容改变事件</title>
    <style type="text/css">
        #el-test{
            line-height: 100px;
            width: 200px;
            border: #e5e5e5 solid 1px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="el-test">QQ 1846492969</div>

<script type="text/javascript">
    // 选择将观察突变的节点
    var targetNode = document.getElementById('el-test');

    // 观察者的选项(要观察哪些突变)
    var config = { attributes: true, childList: true, subtree: true };

    // 当观察到突变时执行的回调函数
    var callback = function(mutationsList) {
        mutationsList.forEach(function(item,index){
            if (item.type == 'childList') {
                console.log('有节点发生改变，当前节点的内容是：');
                console.log(item.target.innerHTML);
            } else if (item.type == 'attributes') {
                console.log('修改了'+item.attributeName+'属性');
            }
        });
    };

    // 创建一个链接到回调函数的观察者实例
    var observer = new MutationObserver(callback);

    // 开始观察已配置突变的目标节点
    observer.observe(targetNode, config);

    // 停止观察
    //observer.disconnect();
</script>
</body>
</html>

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

MDN官方文档地址：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

黄河爱浪
关注
  • 18
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【JS随笔】监听DOM内容改变
m0_66148802的博客
08-13 5780
监听DOM内容改变
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
输入内容变化事件 onchange事件适用于那些需要在用户离开输入字段后触发的场景，比如表单验证或实时更新等。 ```javascript (this)"> function toUpper(ele){ ele.value = ele.value.toUpperCase(); } ``` ###...
JS监听DOM结构变化
angou6476的博客
04-30 232
在做一个微博的接入，需要判断微博是否被关注，要检查微博标签的DIV是否有“已关注”的字符，但这个DIV的内容是微博JSSDK动态生成。$("#id").html()是获取不到我想要的内容。原因是当我们获取的时候内容还没有改变，所以获取不到，如果就想到监听这个DIV内容变化后，再来获取就个时候就能获取到了。于是产生新的问题，如何监听DIV的变化？ 以下为监听DOM结构变化时的JS代码 ...
JavaScript 事件监听详解
最新发布
xycxycooo的博客
07-16 875
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
js监听dom变化
weixin_44106237的博客
03-29 689
在 MutationObserver 的回调函数中，mutations 参数是一个 MutationRecord 对象数组。这个数组包含了对触发变化的 DOM 元素进行的所有更改的描述。是 JavaScript 中的一个接口，用于监视 DOM 树的变化。它提供了一种异步方式来跟踪对 DOM 树所做的更改，并在这些更改发生时触发回调函数。来监视节点的子节点的添加、删除、属性变化等。对象会在指定的 DOM 节点上监听指定类型的 DOM 变化，并在这些变化发生时执行回调函数。
js监听dom变化(未完善)
热门推荐
slongzhang的博客
12-21 8万+
var MO_options = { attributes: true, childList: true,subtree:false,attributeOldValue:true}; //回调事件 function MO_callback(mutationsList, observer) { console.log(mutationsList); console.log(observer); console.log('*******************************')
JS 监听元素dom变化
一只路过的小码农
03-24 4483
我们在开发中，会遇到一些需求，需要监听元素变化，比如元素属性变化，元素大小变化，今天，我们就来聊聊俩种常用实现监听的方案，其他的自行研究。
js监听Dom元素变化
小菜鸟的博客
08-07 3055
当echarts图表要跟随父元素宽高而变化时,我们需要对他的父级元素进行监听,但是resize只能对windows窗口进行监听,对普通dom元素进行监听是不行的. 1.轮循(不优雅) 2.MutationObserver、ResizeObserver 有兼容性问题 3.使用iframe模拟window的resize 创建一个隐藏的iframe 让他与父元素的宽高相等 添加到父元素里 这样父元素宽高改变的时候 iframe也会跟着改变 然后我们监听contentWindow就可以了(注意:父元素得po.
JavaScript监听一个DOM元素大小变化
10-15
JavaScript监听DOM元素大小变化的知识点主要包括监听DOM元素大小变化的场景、原理和具体实现方法。下面将详细阐述这些内容。 1. 监听DOM元素大小变化的场景 在Web开发中，一个常见的场景是需要监听DOM元素的大小...
使用jQuery监听DOM元素大小变化
01-19
今天写页面的时候突然有这么个需求，由于父元素（一个DIV）的height是由javascript计算出来的固定的值，而在其中增加了一个多说插件，在用户评论后，子元素（DIV）的height属性增加，导致子元素溢出。但是又不知道...
vue监听dom大小改变案例
11-19
在Vue中，通常我们通过`v-bind`或`:`来实现数据与DOM元素的双向绑定，但有时我们需要监听DOM元素本身的尺寸变化，例如在布局调整时更新组件的状态。在给定的案例中，开发者遇到了一个问题：当Vue应用中的右侧`swiper...
JavaScript监听DOM节点变化事件
qq_44849271的博客
12-09 4351
DOMCharacterDataModified监听的是元素中文本节点的变化，但是innerHTML、innerText与textContent都是监听不到的，使用el.firstChild.nodeValue才会触发DOMCharacterDataModified的监听。DOMNodeInserted监听的是元素的插入，属性节点的添加是监听不到的。DOMNodeRemoved监听的是元素的移除，属性节点移除是监听不到的。DOMAttrModified监听的是元素属性的变化。
JavaScript 检测 DOM 变化（监听 dom 高度变化）
qq_41974199的博客
03-05 5241
JavaScript 检测 DOM 变化 需要JavaScript MutationObserver 来检测dom变化。 API：MutationObserver MutationObserver 包含三种方法： disconnect()：防止MutationObserver实例继续接收通知，直到再次调用其 observe() 方法，并且不会再次调用观察者对象中包含的某些函数为止。 observe()：将MutationObserver配置为在DOM更改与给定选项匹配时开始通过其替换功能接收通知。 tak
【JS】MutationObserver 监视 DOM 树改变的api
呆呆狗
11-26 1495
是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。
JavaScript HTML DOM 事件监听器
Rockandrollman的博客
11-26 239
<script> //当点击id为myBtn的事件时触发displayDate方法 document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script>
JavaScript：DOM事件
盒马的博客
12-24 1506
讲解JavaScript中的事件，包括事件监听，事件冒泡，事件委托等技巧
前端点滴（JS基础）（六）---- HTML Dom 对象操作
授人以鱼
01-12 454
前端点滴（JS基础）（六）----倾尽所有HTML DOM 操作1. 属性节点的操作（1）查询元素的属性（2）添加/修改元素的属性（3）删除元素的属性（4）判断元素是否有哪个属性总结2. DOM 对象的通用属性3. 设置/获取元素的css样式（1）设置样式（2）获取样式4. DOM获取元素的位置5. 事件和事件对象（1）什么是事件（2）事件绑定的多种方式1、on() 绑定事件2、事件名绑定事件3...
如何监听DOM大小的变化
mapbar_front的博客
10-20 1万+
##1，引言 监听DOM大小的变化，在前端开发中，算是一个比较常见的需求，比如我们要制作可伸缩的图表的时候，可能需要根据DOM大小的变化，进行动态的更新图表。 ##2，实现方式 一般而言，我们可能会考虑到的方式就是在窗口发生变化的时候，获取对应dom的样式。 window.onresize = function() { const width = getStyle(dom, 'width'); ...
vue监听dom事件
02-21
在Vue中，可以使用`v-on`指令来监听＊＊＊元素上添加`v-on`或`@`指令，可以绑定一个事件监听器，当指定的事件触发时，相应的方法将被调用。 以下是Vue监听DOM事件的几种常见方式： 1. 直接在模板中绑定事件监听器： ```html <button v-on:click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 2. 使用方法引用的方式绑定事件监听器： ```html <button @click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 3. 传递参数给事件处理方法： ```html <button @click="handleClick('参数')">点击我</button> ``` ```javascript methods: { handleClick(param) { // 处理点击事件的逻辑，可以使用传递的参数 } } ``` 4. 使用内联语句处理事件： ```html <button @click="count++">点击我</button> <p>点击次数：{{ count }}</p> ``` ```javascript data() { return { count: 0 } } ``` 以上是几种常见的Vue监听DOM事件的方式，你可以根据具体的需求选择适合的方式来处理事件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值