9 HTML DOM事件监听&版本兼容&元素（节点）增删改查
事件监听：
语法：element.addEventListener(event, function, useCapture);
- event：事件的类型，触发什么事件，注意不需要on作为前缀，比如click
- function：事件触发后调用的函数
- useCapture：描述事件是冒泡还是捕获，该参数可选的
当用户点击按钮时触发监听事件：
- document.getElementById("myBtn").addEventListener("click",displayDate);
- addEventListener可以向同个元素添加多个事件，且不会覆盖已存在的事件
向Window对象添加事件句柄：
当用户重置窗口大小时添加时间监听：
window.addEventListner("resize",function(){
document.getElementById("demo").innerHTML = sometext;
});
向同一个元素添加多个事件句柄：
- element.addEventListener("click",myFunction)
- element.addEventListener("mousedown",muSecondFunction);
RemoveEventListener()方法
RemoveEventListener()方法移除由addEventListener()方法添加的事件句柄
element.removeEventListener("mousemove",myFunction);
版本兼容：
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
- element.attachEvent(event, function);
- element.detachEvent(event, function);
元素（节点）增删改查：
- nodeName:节点名称
- nodeValue:节点的值
- nodeType : 节点的类型
创建HTML元素：document.createElement("p");Element.appendChild(node);
首先创建该元素，然后向一个已经存在的元素追加该元素
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var text = document.createTextNode("这是一个新的段落");
var node = document.createElement("p");
node.appendChild(text);
var div = document.getElementById("div1");
div.appendChild(node);
</script>
</body>
删除已有的HTML元素：
- 首先拿到要删除的节点元素及其父亲结点
- 然后通过parent.removeChild(child)删除
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
9 HTML DOM事件监听&版本兼容&元素（节点）增删改查的更多相关文章
- 使用DOM进行xml文档的crud（增删改查）操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
- DOM 事件监听 事件冒泡 事件捕获
addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...
- DOM事件监听和触发
EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...
- DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...
- JS DOM节点增删改查 属性设置
一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加 删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
随机推荐
- json字符串和表相互转化中遇到的一个严重问题
导致脚本崩溃的一个问题 Import "zm.luae" zm.Init Dim aaa="fdsf23423dsfsdf" dim 结果表=Encode.Js ...
- python基础 pyc
关于pyc的几点记录: python运行时会将python语句----->"字节码"------>转发到"虚拟机" 字节码:在大型的python程序 ...
- Atcoder Beginner Contest 147D（按位处理）
把每个数字每一位上二进制数字取出,求答案时直接用N个数里这一位是0的个数乘上这一位是1的个数然后乘上二的这一位次方,注意所有可能溢出的地方都要对mod取模. #define HAVE_STRUCT_T ...
- Chinese Window Lattice And CSS
谁向云端着此亭,檐前树木映窗棂.-- 释绍嵩<陪赵知府登桃岭山亭> (image from 中国窗棂) The traditional Chinese window lattice has ...
- iOS 10.3+ 动态修改 App 图标
支持系统: iOS 10.3+ tvOS 10.2+ Apple 官方文档 官方 API: @interface UIApplication (UIAlternateApplicationIcons) ...
- RocketMq-粪发涂墙1.0
角色 说明 Producer 生产者,用于将消息发送到RocketMQ,生产者本身既可以是生成消息,也可以对外提供接口,由外部来调用接口,再由生产者将受到的消息发送给MQ. Consumer 消费者, ...
- Codeforces Round #579 (Div. 3) 题解
比赛链接:https://codeforc.es/contest/1203/ A. Circle of Students 题意:\(T\)组询问,每组询问给出\(n\)个数字,问这\(n\)个数字能否 ...
- ehcache注解全面解析
通过ehcache以编程方式使用缓存: 跟上面的方式相同,但是缓存通过ehcache去管理,当然比使用map有N多种好处,比如缓存太大了快达到上限之后,将哪一部分缓存清除出去.这种方式完全是通过代码的 ...
- cs/bs
c(客户端)/s服务器:使用前必须安装,更新是,c s同时更新,不能跨频繁太,采用自由协议,相对来说安全. b(浏览器)/s:本质上还是cs ,只是使用了浏览器:如京东,淘宝.无需安装,客户端不需要更 ...
- Matlab geom3d函数注释
Matlab geom3d函数解析 geom3d函数库 geom3d库的目的是处理和可视化三维几何原语,如点.线.平面.多面体等.它提供了操作三维几何原语的底层功能,使得开发更复杂的几何算法变得更加容 ...