当前位置 博文首页 > 文章内容

    DOM状态监听(观察者模式)

    作者: 栏目:未分类 时间:2020-09-11 10:01:34

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    <!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: #fff solid 1px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="el-test">QQ 183672812</div>

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

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

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

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

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

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