javascript 监听DOM内容改变事件

柔情只为你懂 2022-01-22 20:09 314阅读 0赞

效果演示：

![20190603170226270.gif][]

源码：

<!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][https_developer.mozilla.org_en-US_docs_Web_API_MutationObserver]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[20190603170226270.gif]: /images/20220123/e633057ef2fc475bb8ae2d3d6b9d1470.png
[https_developer.mozilla.org_en-US_docs_Web_API_MutationObserver]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220123/dff75ed826d44c42be6a9585c372b062.png