javascript 监听DOM内容改变事件

2024-06-17 00:36| 来源: 网络整理| 查看: 265

效果演示：

源码：

javascript监听DOM内容改变事件 #el-test{ line-height: 100px; width: 200px; border: #e5e5e5 solid 1px; text-align: center; } QQ 1846492969 // 选择将观察突变的节点 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();

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

MDN官方文档地址：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

【本文地址】

公司简介

联系我们