[JS每M日N练] 监听DOM内容改变的各种方案

最新推荐文章于 2024-05-01 23:13:26 发布

夜猫逐梦

最新推荐文章于 2024-05-01 23:13:26 发布

阅读量3.2k

点赞数 2

分类专栏： # Javascript随笔文章标签： javascript DOMNodeInserted MutationObserv

本文链接：https://blog.csdn.net/kinghzking/article/details/123684377

版权

Javascript随笔专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

导读

应用场景

不修改源码的情况下定制一些第三方组件
性能分析
逆向分析

addEventListener

关于这个API不要查看菜鸟教程中的解释，直接看MDN

addEventListener函数说明 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener，
addEventListener事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events
我们可以看出来，addEventListener保罗万象，我们这里只考虑插入事件DOMNodeInserted，删除事件跟插入基本一样，事件名改为DOMNodeRemoved即可。

示例

对于DOMNodeInserted事件，我们只需要知道使用函数document.addEventListener传递第一个参数为字符串DOMNodeInserted，第二个参数为事件处理函数。

事件处理函数的第一个参数为事件对象，其中属性target为被插入的对象，根据该对象的各种属性，我们执行我们的各种操作（禁用、删除、增加等等）。

	var div = document.createElement("div"),
	container =document.getElementById("content"),
	loading =document.getElementById("loading");
	document.addEventListener("DOMNodeInserted",function(e){
		// 被插入的对象
		var node = e.target;
		if(node.parentNode.id==="content"){
			alert("即将移除loading层");
			container.removeChild(loading);
		}
	});
	div.innerHTML = "新插入的内容";
	container.appendChild(div);

MutationObserver

直接参考MDN https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver。
或者参考文章：《javascript 监听DOM内容改变事件》 https://juejin.cn/post/7025877062430752775，注释很详细。

示例

    // 选择将观察突变的节点
    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();

效果如下图：
在这里插入图片描述

在这里插入图片描述

Chrome调试工具实现DOM监控

dev-tool操作说明

我们可以设置三种断点

subtree modifications 子节点内容的的修改删除新增（子节点的属性修改不会触发，当前节点的修改不会触发）
attribute modifications 当前节点的属性修改删除新增
node removal 当前节点被移除

当我们的脚本触发了DOM的修改时，devtools会直接跳转到Source页签并定位到修改DOM的那行代码上

在这里插入图片描述

断点管理

同时我们还可以通过debugger模块来管理所有的DOM断点，
可以看到所有的DOM断点，以及他们所监听的类型，
也可以进行一键删除之类的操作。
在这里插入图片描述

dev-tool设置条件断点

通过js设置监听后，我们会接收到大量信息，如何快速定位到我们想要的信息，就需要用到条件断点了。
这里之所以专门提到条件断点，是因为它跟windows常见调试工具（ollydbg、x64dbg等）设置条件断点方式不太一样，不能在Breakpoints面板内下断点，需要到相应的代码处，右键行号进行断点设置。