JavaScript/jQuery当元素的class类名发生改变时执行的操作，通过MutationObserver监听

80 阅读 0 评论 53 点赞

我是靠谱客的博主强健彩虹，这篇文章主要介绍JavaScript/jQuery当元素的class类名发生改变时执行的操作，通过MutationObserver监听，现在分享给大家，希望可以做个参考。

概述

MutationObserver 是现代浏览器提供的用来检测 DOM 变化的网页接口。你可以使用这个接口来监听新增或者删除节点，属性更改，或者文本节点的内容更改。
你可以在以下几种情况信手拈来 MutationObserver 接口。比如：
　　通知用户当前所在的页面所发生的一些变化。
　　通过使用一些很棒的 JavaScript 框架来根据 DOM 的变化来动态加载JavaScript 模块。
　　可能当你在开发一个所见即所得编辑器的时候，使用 MutationObserver 接口来收集任意时间点上的更改，从而轻松地实现撤消/重做功能。

使用 MutationObserver

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 var mutationObserver = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    /************************当DOM元素发送改变时执行的函数体***********************/
                    if ($("#treeDemo_1_check").hasClass('checkbox_true_full') || $("#treeDemo_1_check").hasClass('checkbox_true_full_focus') || $("#treeDemo_1_check").hasClass('checkbox_true_part') || $("#treeDemo_1_check").hasClass('checkbox_true_part_focus')) {
                            $("#Point").css("display", "block");
                        } else {
                            $("#Point").css("display", "none");
                        }
                    /*********************函数体结束*****************************/
                });
            });
            						  /**Element**/
            mutationObserver.observe($('#myfiles')[0], {
                attributes: true,
                characterData: true,
                childList: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true
            });