DOMNodeInserted,DOMNodeRemoved 和监听内容变化插件
元素的增加 删除 及事件监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
点击添加li
</div>
<ul>
<li>kkkk</li>
</ul>
<button>
点击删除节点
</button>
</body>
<script>
var ul = document.getElementsByTagName('ul')[0]
document.getElementsByTagName('div')[0].onclick = function () {//添加元素
var li=document.createElement('li');
var t=document.createTextNode('666')
li.appendChild(t) ul.appendChild(li)
}
document.getElementsByTagName('button')[0].onclick = function () {//删除元素
ul.removeChild(ul.lastElementChild) } ul.addEventListener('DOMNodeInserted',function () {
console.log(ul.childElementCount) })
ul.addEventListener('DOMNodeRemoved',function () {
console.log(ul.childElementCount) }) </script>
</html>
DOMNodeInserted,DOMNodeRemoved 和监听内容变化插件的更多相关文章
- edittext 监听内容变化
给EditText追加ChangedListener可以监听EditText内容变化的监听 如图是效果图 类似于过滤的一种实现 1 布局也就是一个EditText,当EditText内容发生变化时 ...
- 监听内容变化 TextWatcher @功能
监听多个TextView的内容变化 使用示例 TextWatcherUtils.addTextChangedListener(isAllNotEmpty -> btnLogin.setEnabl ...
- node.js监听文件变化
前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS开发之--为UITextField监听数值变化的三种方法
项目中有个验证码输入直接验证跳转页面,用的RAC来监听textfield的输入值,如下: @weakify(self); [self.codeView.textField.rac_textSignal ...
- Angular.js中使用$watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
- 如何使用NodeJs来监听文件变化
1.前言 在我们调试修改代码的时候,每修改一次代码,哪怕只是很小的修改,我们都需要手动重新build文件,然后再运行代码,看修改的效果,这样的效率特别低,对于开发者来说简直不能忍. 2.构建自动编译工 ...
- android动态注册监听网络变化异常
在使用广播接收器监听网络变化的时候,在AndroidManifest.xml中加入<user-permission android:name="android.permission.A ...
随机推荐
- P2770 航空路线问题
\(\color{#0066ff}{题目描述}\) 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线. (1)从最西端城市出发, ...
- POJ1847 Tram SPFA算法变形
原题地址:http://poj.org/problem?id=1847 Tram:有轨电车 这题就是构造一个有向无权图,然后每一个点都会有一个开关,这个开关指向他的其中一个出度.当途经这个点的时候,如 ...
- Servlet中Web.xml的配置详解(一)
1 定义头和根元素 部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出文件的字符编码.DOCYTPE声明必须立即出现在此头之后.这个声明告诉服务器适用的 ...
- CF352A Jeff and Digits
Jeff's got n cards, each card contains either digit 0, or digit 5. Jeff can choose several cards and ...
- springcloud系列九 整合Hystrix Dashboard
Hystrix Dashboard是Hystrix的仪表盘组件,主要用来实时监控Hystrix的各项指标信息,通过界面反馈的信息可以快速发现系统中存在的问题. 整合快速体验: pom.xml(这个是F ...
- php 多语言(UTF-8编码)导出Excel、CSV乱码解决办法之导出UTF-8编码的Excel、CSV
新项目,大概情况是这样的:可能存在多国.不同语种使用者,比喻有中文.繁体中文,韩文.日本等等,开发时选择了UTF-8编码,开发顺利,没有问题.昨天做了一个csv导出功能,导出的东西完全乱了: 设置mb ...
- mybatis CDATA引起的查询失败
<![CDATA[ ]]> 在被CDATA包围的所有字符串不会被mybatis解析, 直接写入sql了 CDATA应该只用在特殊字符前后,不能用在<if> <foreac ...
- spring boot——常用注解
@SpringBootApplication:申明让spring boot自动给程序进行必要的配置,这个配置等同于:@Configuration ,@EnableAutoConfiguration 和 ...
- Robotframework测试相关库
一. 官网地址 http://robotframework.org/#libraries 二.几类测试所用到的常用库初步整理 1. UI自动化测试 Selenium2Library.BuiltIn(自 ...
- 2019.03.21 读书笔记 基元类型的Parse与TryParse 性能与建议
Parse转换失败时会抛出异常,耗损性能,如果转换成功,则与TryParse无差异.查看源码,tryparse的代码更多一些,在失败时,反而性能更优,主要是抛出异常耗损了性能.所以在不确定是用Tryp ...