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 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
随机推荐
- Docker学习路线4：Docker基础知识
Docker是一个平台,简化了在轻量.可移植的容器中构建.打包和部署应用程序的过程.在本节中,我们将介绍Docker的基础知识.其组件以及您需要开始使用的关键命令. 容器是什么? 容器是一个轻量级.独 ...
- openGauss支持国密SM3和SM4算法
国密算法介绍 国密即国家密码局认定的国产密码算法,主要有 SM1,SM2,SM3,SM4.密钥长度和分组长度均为 128 位.针对银行客户对数据库安全能力的诉求以及提高产品安全竞争力的要求,进行数据库 ...
- MOGDB/openGauss索引推荐及虚拟索引
MOGDB/openGauss 索引推荐及虚拟索引 索引推荐 在 ORACLE 的优化中,可能大家有接触过 SQL Tuning Advisor(SQL 调优顾问,STA),类似的 MOGDB/ope ...
- 响应式系统与 React
0x1 React 的历史与应用 应用场景 前端应用开发,如 Meta.Ins.Netflix 的网页版 移动原生应用开发,如 Ins.Discord 结合 Electron 进行桌面应用开发 发展历 ...
- Python中2种常用数据可视化库：Bokeh和Altair
本文分享自华为云社区<探究数据可视化:Bokeh vs. Altair>,作者:柠檬味拥抱. 在数据科学和数据分析领域,数据可视化是一种强大的工具,可以帮助我们更好地理解数据.发现模式和趋 ...
- React中受控组件和非受控组件
一.受控组件 受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据 举个简单的例子: class TestComponent extends React.Component { con ...
- 学习 XQuery：XML数据查询的关键
XQuery 是 XML 数据的查询语言,类似于 SQL 是数据库的查询语言.它被设计用于查询 XML 数据. XQuery 示例 for $x in doc("books.xml" ...
- 牛客网-SQL专项训练5
①查询运动员表中运动员的所有信息,按照年龄升序,成绩降序排列.SQL语句为: SELECT * FROM 运动员 ORDER 年龄 ASC, 成绩 DESC: 知识点: ASC:升序,默认就为升 ...
- DNS高可用设计--软件高可用
DNS是网络的基础服务,网络上的各种应用对DNS的依赖性很高.DNS的稳定,直接决定了上层应用服务的稳定.那如何保障DNS服务的高可用呢?我们先来看下高可用的概念: 高可用 高可用(High avai ...
- 分久必合的Lindorm传奇
简介: 2009年,阿里巴巴首先提出用分布式架构替代传统商业数据库,成功用自主开源的AliSQL支撑双11数据洪流:2016年,为应对超大规模业务场景,阿里云开始自研分布式数据库.十余年间,阿里巴巴数 ...