JS - 监听整个页面上的 DOM 树变化

最新推荐文章于 2024-05-08 22:49:59 发布

打工很辛苦吧

最新推荐文章于 2024-05-08 22:49:59 发布

阅读量384

点赞数

分类专栏：学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/psw_9999/article/details/122357585

版权

学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

该博客演示了如何使用MutationObserver监听DOM树的变化，当页面元素添加或删除时触发回调函数进行记录。示例中创建了一个观察者实例，监控body元素的属性、子节点变更，并在2秒后动态添加新节点以展示效果。

摘要由CSDN通过智能技术生成

监听页面上的 DOM 树变化

记录一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="hello">hello word!</div>
    <script>
      var targetNode = document.querySelector("body");

      // subtree：是否监听子节点的变化
      var config = { attributes: true, childList: true, subtree: true };

      var callback = function(mutationsList) {
				// Dom发生变化，加载时也会生效
        for (var mutation of mutationsList) {
					console.log(mutation)
          if (mutation.type == "childList") {
						console.log("有一个子节点被添加或移除")
          } else if (mutation.type == "attributes") {
						console.log('这个'  + mutation.attributeName + '属性被修改')
          }
        }
      };

      	var observer = new MutationObserver(callback);

      	observer.observe(targetNode, config);

		setTimeout(() => {
			var divnode = document.createElement("div");
			divnode.id = 'word'
	      		var textNode = document.createTextNode("word");
	      		divnode.appendChild(textNode);
	      		document.getElementById("hello").appendChild(divnode);
		},2000)
    </script>
  </body>
</html>