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 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- OpenHarmony 3.2 Beta Audio——音频渲染
一.简介 Audio是多媒体子系统中的一个重要模块,其涉及的内容比较多,有音频的渲染.音频的采集.音频的策略管理等.本文主要针对音频渲染功能进行详细地分析,并通过源码中提供的例子,对音频渲染进行流程的 ...
- OpenHarmony轻松玩转GIF数据渲染
OpenAtom OpenHarmony(以下简称"OpenHarmony")提供了Image组件支持GIF动图的播放,但是缺乏扩展能力,不支持播放控制等.今天介绍一款三方库--o ...
- Windows wsl2安装Ubuntu
wsl(Windows Subsystem for Linux)即适用于Windows的Linux子系统,是一个实现在Windows 10 / 11上运行原生Linux的技术. wsl2 为其迭代版本 ...
- 鸿蒙HarmonyOS实战-ArkUI组件（Video）
一.Video 视频组件是用于应用程序中嵌入视频的一种方法.它可以让用户在网站上观看视频并与其进行交互.通常,视频组件将一个视频文件嵌入应用程序中,并提供一组控件,这些控件允许用户播放.暂停.跳过.音 ...
- 看不懂来打我，vue3如何将template编译成render函数
前言 在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件,通过那篇文章我们知道了,template编译为render函数底层就是调用了@vue ...
- react中引入css的方式有哪几种？区别？
一.是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则: 可以编写局部css,不会随意污染其他组件内的原生: 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不 ...
- 同义词查找，关键词扩展，使用腾讯Tencent AILAB的800万词向量，gensim，annoy
最近在做一个关键词匹配系统,为了更好的效果, 添加一个关键词扩展的功能.使用Tencent AIlab的800万词向量文件. 腾讯AILAB的800万词向量下载地址:https://ai.tencen ...
- Oracle 数据库误删操作闪回
Oracle 数据库误删操作闪回 闪回功能是内置的,类似于服务器快照,看运气要在的数据在不在 select * from testtable as of timestamp to_timestamp( ...
- 【笔记】Oracle union all&for update锁
[笔记]Oracle union all&for update union all 在Oracle中有三种类型的集合操作 UNION:求并,重复记录只显示一次 UNION ALL:求并集,显示 ...
- 国内唯一！阿里云容器服务进入 Forrester 领导者象限
简介:近日,国际权威咨询机构 Forrester 发布< The Forrester WaveTM: Public Cloud Container Platforms, Q1 2022 > ...