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 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- 搭载KaihongOS的工业平板、机器人、无人机等产品通过3.2版本兼容性测评，持续繁荣OpenHarmony生态
近日,搭载深圳开鸿数字产业发展有限公司(简称"深开鸿")KaihongOS 软件发行版的工业平板.机器人.无人机等商用产品均通过 OpenAtom OpenHarmony(以下简称 ...
- 深入理解 Java 循环结构：while、do while、for 和 for-each 循环
Java 循环 循环可以执行一个代码块,只要达到指定的条件.循环很方便,因为它们节省时间,减少错误,并使代码更易读. Java While 循环 while 循环会循环执行一个代码块,只要指定的条件为 ...
- C 语言文件处理全攻略：创建、写入、追加操作解析
C 语言中的文件处理 在 C 语言中,您可以通过声明类型为 FILE 的指针,并使用 fopen() 函数来创建.打开.读取和写入文件: FILE *fptr; fptr = fopen(filena ...
- MyBatis ognl.NoSuchPropertyException
描述 SpringBoot + Mybatis-plus 项目,运行时出现如下错误: ognl.NoSuchPropertyException:没有对应属性异常 Invalid bound state ...
- .Net 代码分析工具对比 visual studio 2022 current
目录 原因 背景知识 名词解释 分析器 分析器在IDE里 目标 查找思路及过程 CodeMaid Roslyn StyleCop.Analyzer StyleCop? StyleCop.Analyze ...
- 【鸿蒙千帆起】高德地图携手HarmonyOS NEXT，开启智能出行新篇章
2024年1月18日下午,华为举办了鸿蒙生态千帆启航仪式,对外宣布HarmonyOS NEXT星河预览版现已开放申请,同时,首批200+鸿蒙原生应用加速开发,鸿蒙生态设备数量更是突破了8亿大关.这些进 ...
- sql 语句系列(更新系列)[八百章之第六章]
使用另一个表更新记录 有时候我们的数据不会立即去更新,而是存在另外一张表中等待更新,这是在日常开发中常见的操作. update e set e.SAL=ns.SAL+e.SAL, e.COMM=ns. ...
- 布匹瑕疵检测数据集EDA分析
分析数据集中 train 集的每个类别的 bboxes 数量分布情况.因为训练集分了两个:train1,train2.先根据两个数据集的 anno_train.json 文件分析类别分布.数据集:布匹 ...
- Javscript数组的常用方法有哪些？
数组基本操作可以归纳为 增.删.改.查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会 下面对数组常用的操作方法做一个归纳 增 下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影 ...
- vue截取video视频中的某一帧
在vue中如何做到给视频拍照,留住那一帧的美好呢? 且看代码 <template> <div> <video src="../assets/video.mp4& ...