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 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- 数据库SQL(MSSQLSERVER)服务启动错误代码3414
昨天永和客户联系我,说他们的前台系统报错了,给我发了报错的图片.看到错误的第一眼就知道是数据库出问题了,连不上sql Server. 虽然知道是数据库出问题了,但是刚开始的时候没有打开SQL Serv ...
- 攻防世界Reverse三星题 zorropub
题目 分析过程 丢到PE里面,无壳,64bit 丢到IDA里面,查看mian函数 1 int __fastcall main(int a1, char **a2, char **a3) 2 { 3 s ...
- 家庭实验室系列文章-电脑如何配置网络唤醒 (WOL)?
前言 其实这个专题很久很久之前就想写了,但是一直因为各种原因拖着没动笔. 因为没有资格,也没有钱在一线城市买房 (); 但是在要结婚之前,婚房又是刚需. 我和太太最终一起在一线城市周边的某二线城市买了 ...
- 选择排序的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:两两元素相比较,先扫描一遍未排序数列,把未排序的数列中的最小(大)元素,放到数列的已排序的末尾 特性 选择排 ...
- apache 服务器配置常用知识点合集
前言 因为当年周围同学都在学php,最为简单的就是学php 好就业啊,写个一些php,最后放弃了,apache也看了两眼吧.下面是我使用有记录的,没有记录的我后面会补上. 正文 域名配置 1.取消 N ...
- django中对模型字段名的限制
Django 对模型的字段名有一些限制: 一个字段的名称不能是 Python 保留字,因为这会导致 Python 语法错误.比如: class Example(models.Model): pass ...
- JVM简明笔记3：类加载机制
1 类的加载 类的加载指的是将类的 .class 文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个 java.lang.Class 对象,用来封装类在方法区内的数据结 ...
- 【笔记】报错：numeric or value error: character to number conversion error
报错:numeric or value error: character to number conversion error 报错如下: 数据库操作错误."2327,13619/v1:65 ...
- 阿里云安全运营中心：DDoS攻击趁虚而入，通过代理攻击已成常态
应用层DDoS攻击与传统的DDoS攻击有着很大不同.传统的DDoS攻击通过向攻击目标发起大流量并发式访问造成服务不可用,系统瘫痪,这种方式比较容易被识破,且市场上已经有成熟的应对方案.而近年来兴起的应 ...
- KubeCon 2020 演讲集锦｜《阿里巴巴云原生技术与实践 13 讲》开放下载
2020 年 7 月 30 日至 8 月 1 日,由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 Cloud Native + Open S ...