事件监听:

语法: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);

首先创建该元素,然后向一个已经存在的元素追加该元素

  1. <body>
  2. <div id="div1">
  3. <p id="p1">这是一个段落。</p>
  4. <p id="p2">这是另一个段落。</p>
  5. </div>
  6. <script>
  7. var text = document.createTextNode("这是一个新的段落");
  8. var node = document.createElement("p");
  9. node.appendChild(text);
  10. var div = document.getElementById("div1");
  11. div.appendChild(node);
  12. </script>
  13. </body>

删除已有的HTML元素:

  1. 首先拿到要删除的节点元素及其父亲结点
  2. 然后通过parent.removeChild(child)删除
  1. <div id="div1">
  2. <p id="p1">This is a paragraph.</p>
  3. <p id="p2">This is another paragraph.</p>
  4. </div>
  5. <script>
  6. var parent=document.getElementById("div1");
  7. var child=document.getElementById("p1");
  8. parent.removeChild(child);
  9. </script>

9 HTML DOM事件监听&版本兼容&元素(节点)增删改查的更多相关文章

  1. 使用DOM进行xml文档的crud(增删改查)操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  2. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...

  3. DOM事件监听和触发

    EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...

  4. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...

  5. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  6. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  7. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  8. Javascript事件监听

    FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...

  9. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

随机推荐

  1. [lua]紫猫lua教程-命令宝典-L1-01-04. 字符串数据

    L1[字符串]01. 单引号与双引号 没什么说得 字符串:以双引号包含 或者单引号包含 或者[[]]包含 L1[字符串]02. 长文本内容 小知识:如果用[[]]包含字符串内容 但是字符串内容里面 包 ...

  2. IDEA 自定义注释模板 支持设置多个param参数

    在使用IDEA过程中,很多人可能感觉自带注释太简约了,想增加一些属性,比如作者.创建时间.版本号等等,这个时候我们可以使用自定义的注释模板来实现我们需求,话不多说直接进入如何自定义模板设置: 打开设置 ...

  3. MYSQL内置函数【转】

    一.MySQL 字符串函数 函数 描述 实例 ASCII(s) 返回字符串 s 的第一个字符的 ASCII 码. 返回 CustomerName 字段第一个字母的 ASCII 码: SELECT AS ...

  4. wix在使用heat自动生成wxs时添加windows服务组件

    最近需要给安装包增加一个windows服务组件,按照我的理解,我以为只需要Product.wxs加一段如下的标签就可以了 <Componet Id="myservice"&g ...

  5. List 线性表:ArrayLis,LinkedList

    package seday11.list; import java.util.ArrayList;import java.util.List; /*** @author xingsir * java. ...

  6. 关于pgsql 的json 和jsonb 的数据查询操作笔记整理

    关于pgsql 的json 和jsonb 的数据处理笔记 1. json 和jsonb 区别两者从用户操作的角度来说没有区别,区别主要是存储和读取的系统处理(预处理)和耗时方面有区别.json写入快, ...

  7. 201771010135 杨蓉庆《面对对象程序设计(java)》第十六周学习总结

    1.实验目的与要求 (1) 掌握线程概念: (2) 掌握线程创建的两种技术: (3) 理解和掌握线程的优先级属性及调度方法: (4) 掌握线程同步的概念及实现技术: 一.理论知识 ⚫ 线程的概念 (1 ...

  8. 201771010135 杨蓉庆《面对对象程序设计(java)》第十五周学习总结

    1.实验目的与要求 (1) 掌握Java应用程序的打包操作: (2) 了解应用程序存储配置信息的两种方法: (3) 掌握基于JNLP协议的java Web Start应用程序的发布方法: (5) 掌握 ...

  9. 台电X16pro刷机记录

    Android: 如果要刷安卓,需要使用win7系统电脑,且需要安装java环境,同时按住 音量减+电源键进入刷机模式(DNX BOOT MODE..),这时在PhoneFlashTool_5.3.2 ...

  10. 4500-X启动到“511K bytes of non-volatile configuration memory”,无法继续?

    在设备做了某些配置后,尤其是升级,重启设备后,发现设备在如下界面卡住,无法进一步进入CLI命令行. Platform Manager: starting in standalone mode (act ...