js/Jquery通过MutationObserver实现监听dom元素的属性变化用div简单实例

最新推荐文章于 2024-05-27 17:51:58 发布

试图让你心动

最新推荐文章于 2024-05-27 17:51:58 发布

阅读量3.3k

点赞数 3

分类专栏： jquery 文章标签： javascript 前端 vue jquery html

本文链接：https://blog.csdn.net/zhangmeixia969/article/details/124194027

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
图片实例👆

utationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说 DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

1.首先要找到箭头的属性变化的dom节点

var targetNode = $('#query')[0];或者 var targetNode = document.getElementById("query")

2。定义个回调函数（这个回调函数接受两个参数：第一个是变动数组，第二个是观察器实例）

function callback(mutationsList, observer) {
    console.log(13,mutationsList);
    console.log(14,observer);
    console.log(111111111);
    }

3，使用observe方法监听

var  options = {
        'childList': true,
        'attributes':true
        
    }

var mutationObserver = new MutationObserver(callback);
    mutationObserver.observe(targetNode, options );

全文代码如上图 👆如下代码👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #query{
        width: 100px;
        height: 200px;
        border: 1px solid red;
    }

</style>
<body>
    <div>
        <div id="query">111111111</div>
        <button  onclick="copyText()">测试</button>
        <button  onclick="copyText1()">测试2</button>
        <button onclick="copyText2()">测试3</button>
    </div>
    <script src="./jquery-2.1.4.min.js"></script>
<script>
    function copyText(){
        $('#query').html('1212')
    }
    function copyText1(){
        $('#query').html('测试你好呀')
    }
    function copyText2(){
        $('#query').html('测试333333')
    }
    var targetNode = $('#query')[0];
    function callback(mutationsList, observer) {
    console.log(13,mutationsList);
    console.log(14,observer);
    console.log(111111111);
    }
    
    var  options = {
        'childList': true,
        'attributes':true
        
    }
    var mutationObserver = new MutationObserver(callback);
    mutationObserver.observe(targetNode, options );

</script>
</body>
</html>

具体的参数可以点这里查看我也是通过这篇文章学习的

一般这种方法用在比如一个值在多个地方被改变的时候可以监听到所有被改变时候的值然后统一执行一些代码！

不要喷小编呀！！

试图让你心动

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js/Jquery通过MutationObserver实现监听dom元素的属性变化用div简单实例

图片实例👆utationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说 DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全.
复制链接

扫一扫