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

最新推荐文章于 2024-09-16 16:19:02 发布

试图让你心动

最新推荐文章于 2024-09-16 16:19:02 发布

阅读量3.6k

点赞数 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>