JS监听DOM创建和销毁
源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var targetNode = document.querySelector("body");
var observerOptions = {
childList: true, // 观察目标子节点的变化，是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true // 观察后代节点，默认为 false
} var observer = new MutationObserver(function(mutationList, observer) {
mutationList.forEach((mutation) => {
console.log(mutation)
});
console.log(observer)
});
observer.observe(targetNode, observerOptions); /**
* 创建节点
*/
const createEl = () => {
let el = document.createElement('div');
el.className = 'preRenderContainer'
el.append(new Text('我是动态添加的节点'));
document.body.append(el)
} /**
* 删除节点
*/
const deleteEl = () => {
document.getElementsByClassName('preRenderContainer')[0].remove();
}
</script>
<button onclick="createEl()">创建DOM</button>
<button onclick="deleteEl()">删除DOM</button>
</body>
</html>
效果图
JS监听DOM创建和销毁的更多相关文章
- JS监听DOM结构变化
在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...
- js监听dom元素内容变化
$("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- 原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...
- js实时监听dom尺寸变化
开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver Resi ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- 国密 SM2 的非对称签名验签过程
国密 SM2 的非对称签名验签过程 介绍 非对称加密确保了消息传输中的保密性,但是由于使用公钥加密,而公钥是分发出去的,可能泄露,谁都可以使用公钥加密发送消息. 因此为了保证收到的消息是由对应的发送者 ...
- 带你走进红帽企业级 Linux 6体验之旅(安装篇)
红帽在11月10日发布了其企业级Linux,RHEL 6的正式版(51CTO编辑注:红帽官方已经不用RHEL这个简称了,其全称叫做Red Hat Enterprise Linux).新版带来了将近18 ...
- Avalonia 中的样式和控件主题
在 Avalonia 中,样式是定义控件外观的一种方式,而控件主题则是一组样式和资源,用于定义应用程序的整体外观和感觉.本文将深入探讨这些概念,并提供示例代码以帮助您更好地理解它们. 样式是什么? 样 ...
- mysql 重新整理——索引优化explain简单介绍 [八]
前言 做开发的我们晓得一个道理,就是说不是说你说这东西性能稳定就是性能稳定,你说发版本就发版本,这个是测试部门说了算的. 那么索引优化的关键也就是说一个我们来逐步调优,调优就要知道我们这条语句在mys ...
- 实训篇-Html-表格练习2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- List拖拽功能的实现
概述 如何在HarmonyOS应用中实现一个可拖拽的列表组件,通过这个组件,用户可以拖动列表中的项并将其放置在新的位置,实现列表的动态排序. 核心功能 列表初始化:创建并填充列表数据. 拖 ...
- shell编程实现用户循环输入
如果你想在Shell脚本中实现一个循环判断用户输入是否正确,并根据情况决定是否退出系统,可以使用一个无限循环(如while true)和条件语句来实现. 以下是一个示例代码,用于演示这种情况: #!/ ...
- 《c#高级编程》第5章C#5.0中的更改（十）——异步编程
C#异步编程是一种在单线程上实现并发执行的技术,它通过使用异步方法.任务等高级概念,使得应用程序能够更好地响应用户操作.处理大量数据和操作外部资源.C#异步编程的核心概念包括: 异步方法:使用 asy ...
- RocketMQ实战系列（一）——RocketMQ简介
RocketMQ是一款分布式消息引擎,由阿里巴巴旗下的MetaQ和RocketMQ合并而来.RocketMQ提供了高可靠.高吞吐量.可伸缩.易于使用的消息发布/订阅服务,适用于大规模分布式系统的消息通 ...
- 监控最佳实践--redis及业务接口
简介: 监控最佳实践--redis及业务接口 1. 背景 1.1 问题 2020-12-04,客户侧redis集群版监控DB0 CPU突增至100%,导致数据库无法正常服务,经排查客户侧业务上存在2M ...