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 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- 狂神说Java——Mybatis学习笔记
前言:配合狂神老师的教学视频使用效果更佳: https://www.bilibili.com/video/BV1NE411Q7Nx/?spm_id_from=333.1007.top_right_ba ...
- 大奖升级！HMS Core线上Codelabs挑战赛第3期：用3D建模构建元宇宙
"元宇宙"概念风生水起,在AR.VR等技术构建的虚拟世界里,3D模型担当重要角色,无论是为玩家提供更丰富更真实游戏体验的3D游戏领域,还是各大电商平台正在启用并不断完善的3D虚拟购 ...
- 二、Unity调用Xcode封装方法
1.开始封装Unity调用接口 我们在Xcode中 写的接口需要在extern "C"中(加上extern "C"后,会指示编译器这部分代码按C语言的进行编译) ...
- Android 开发入门（4）
0x06 中级控件 (1)图形绘制 a. 图形 Drawable Drawable 类型包括图片.色块.画板.背景 drawable 目录一般保存描述性 XML 文件,具有具体分辨率的 drawabl ...
- 在ashx中如何使用session
前言 都是写陈年往事罢了,如何在ashx 使用session 正文 我们知道在ashx 中使用context.Session 我们即读取不到值,同时设置完也感觉无效. 原因是我们在ashx 中使用的s ...
- c# 多线程传值注意的地方
前言 下面介绍多线程传值的几种方式,并说明注意点. 正文 static void Main(string[] args) { SampleTread thead = new SampleTread(1 ...
- Elasticsearch与kibana的单机安装
前言 本文为纯实操记录,以供需要时查阅. 对应版本为7.3,jdk版本1.8 Elasticsearch安装 Elasticsearch官网:https://www.elastic.co/cn/pro ...
- 1.css的初认识
1.什么是CSS? Cascading Style Sheet 层叠级联样式表 CSS:表现层(美化网页) 字体.颜色.边距.高度.宽度.背景图片.网页定位.网页浮动.... 2.CSS发展史 CSS ...
- 力扣540(java&python)-有序数组中的单一元素（中等）
题目: 给你一个仅由整数组成的有序数组,其中每个元素都会出现两次,唯有一个数只会出现一次. 请你找出并返回只出现一次的那个数. 你设计的解决方案必须满足 O(log n) 时间复杂度和 O(1) 空间 ...
- KubeVela 1.5：灵活框选 CNCF 原子能力打造独特的企业应用发布平台
简介: KubeVela 1.5 于近日正式发布.在该版本中为社区带来了更多的开箱即用的应用交付能力,包括新增系统可观测:新增 Cloud Shell 终端,将 Vela CLI 搬到了浏览器:增强的 ...