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 第一种方式是我们最常用的 ...
随机推荐
- 动手实现CapsNet系列——2 实现(未完待续)
执行后返回如下信息: Loading complete. Training started! [epoch 0][iter 0] loss: 0.8082, acc: 14.0000% (14/100 ...
- Linux挂载(mount,umount及开机自动挂载
挂载概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载” 1.挂载:根 ...
- EFCore.BulkExtensions Demo
最近做了一个项目,当用EF传统的方法执行时,花时4小时左右,修改后,时间大大减少到10分钟,下面是DEMO实例 实体代码: public class UserInfoEntity { [Key] pu ...
- Django--模型管理器
参考https://blog.csdn.net/qq_34788903/article/details/87889451 可参考视频 : https://www.bilibili.com/video ...
- 树莓派3B 安装gcc和g++
转:https://blog.csdn.net/zhuming3834/article/details/81946707 安装 如果不是root 用户,请自行加上sudo apt-get instal ...
- 谈谈对Spring IOC的理解(转载)
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- 部署etcd中使用ansible进行变量初始化
ansible-playbook 要进行默认变量的生产,可以依靠jinja 的模板渲染功能 看几个官方给出的例子 调用setup 中的变量 例如 setup 中的变量层级为 ansible_eth0_ ...
- TakeColor下载及调节鼠标指针不一致的问题
取色器下载链接: 链接:https://pan.baidu.com/s/19TBWZA2ltaLQjzskTipnmg 提取码:2uz3 若出现指针与鼠标不一致: TakeColor v8.0 > ...
- 《记一次Linux被入侵全过程》阅读笔记
此前从未了解过关于网络安全相关方面的内容,仅仅知道安全性是软件必不可少的质量属性之一,而由于自己所做项目对安全性需求基本为无,所以很少对此进行关注.今天看到作者系统被入侵的经验,于是点开来读,以积累他 ...
- 数码管显示“0~F”的共阳共阴数码管编码表
嵌入式设备中数码管显示“0~F”的方式是:定义了一个数组,里面含有16个元素,分别代表0~F,这样可以方便以后的调用.共阳极数码管编码表:unsigned char table[]={0xc0,0xf ...