javascript：dom的变动事件

最新推荐文章于 2024-03-04 15:35:45 发布

mkmin

最新推荐文章于 2024-03-04 15:35:45 发布

阅读量2.7k

点赞数 1

分类专栏： javascript javascript 文章标签： javascript dom DOMSubtreeModified

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/80250248

版权

javascript 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

javascript

44 篇文章 2 订阅

订阅专栏

比较少用这东西，毕竟很多时候我们都不去实用这个的，而且监听事件已经可以满足我们的需求了。但是记下来。多学一点还是好的

资料来源：javascript高级编程

代码：

当然不止下面的代码这四种方法，只是设个简单的。毕竟这个是一片记录学习的博客

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<button class="insert">insert</button>
		<button class="delete">delete</button>
		<button class="changeworld">changes</button>
		<div class="deletediv" style="width: 100px;height: 100px;background-color: red;">准备拿来删除的div</div>
		<div class="textmodified" style="width: 100px;height: 100px;background-color: green;">用来修改文字的</div>
		<script>
			document.querySelector(".insert").addEventListener("click", function(event) {
				var a = document.createElement("div");
				a.className = "myinsertdiv"
				a.style = "background-color:#000000;width:200px;height:200px;";
				document.querySelector("body").appendChild(a);

			});
			document.querySelector(".delete").addEventListener("click", function(event) {
				document.querySelector("body").removeChild(document.querySelector(".deletediv"));

			});

			document.querySelector(".changeworld").addEventListener("click", function(event) {
				document.querySelector(".textmodified").innerText = "文字已经被修改了"

			});
			//当变动的时候
			document.addEventListener("DOMSubtreeModified", function(e) {
				console.log("dom发生变动")
				console.log(e);
			})
			document.addEventListener("DOMNodeInserted", function(e) {
				console.log("有元素被加入")
				console.log(e);
			})
			document.addEventListener("DOMNodeRemoved", function(e) {
				console.log("有元素被移除")
				console.log(e);

			})
			document.addEventListener("DOMCharacterDataModified", function(e) {
				console.log("有dom文本发生变化")
				console.log(e);
			})
			document.querySelector(".textmodified").addEventListener("DOMCharacterDataModified", function(e) {
				console.log("设置在即将改变的div上的监听事件有dom文本发生变化")
				console.log(e);
			})
		</script>
	</body>

</html>

mkmin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript：dom的变动事件

比较少用这东西，毕竟很多时候我们都不去实用这个的，而且监听事件已经可以满足我们的需求了。但是记下来。多学一点还是好的资料来源：javascript高级编程代码：当然不止下面的代码这四种方法，只是设个简单的。毕竟这个是一片记录学习的博客&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫

专栏目录