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

MutationObserver是现代浏览器提供的DOM变化检测接口,可用于监听节点增删、属性变更等。本文介绍其使用方法,包括如何根据DOM变化动态加载JS模块,实现在所见即所得编辑器中轻松实现撤消/重做功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概述

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

使用 MutationObserver

 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
            });

复制粘贴你只需要更改函数体中的操作和指定的Element即可
如图:
在这里插入图片描述

注意:Element必须是DOM元素,使用jq选择器获取元素后,需要将其转换成DOM元素。转换的方式就是在JQ选择器后面添加 ‘[index]’。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆皮没有豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值