JavaScript——DOM，前端通用流行框架大全

结果展示：

1·6·3 节点具体操作

1. 创建节点：document.createElement(‘tagName’);

2. 添加节点：node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面after伪元素。node.insertBefore(child,指定元素)；将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

3. 删除节点：node.removeChild(child);从DOM中删除一个子节点，返回删除的节点。

4. 复制节点：node.cloneNode( );返回调用该方法的节点的一个副本。如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

例如：

• 123

• 输出结果：

  

  删除
• 熊大
• 熊二
• 光头强

• 效果展示：

  
• 1111
• 2
• 3

• 输出结果：

  

  1·7 事件

  ---

  1·7·1 注册事件

  给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式。

  传统注册事件方式：

  • 利用on开头的事件onclick；

  • <button οnclick=“alert(‘hi~’)”>；

  • btn.οnclick=function(){}；

  • 特点：注册事件的唯一性；

  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；

  方法监听注册方式：

  • w3c标准 推荐方式；

  • addEventListenner()它是一个方法；

  • IE9之前的IE不支持此方法，可使用attachEvent（）代替；

  • 特点：同一个元素同一事件可以注册多个监听器；

  addEventListenner事件监听方式：

  语法：

  eventTarget.addEvenListener(type,listener[,useCapture])

  使用：

  eventTarget.addEventListennertListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

  该方法接收三个参数：

  1】type：事件类型字符，比如click、mouseover，注意这里不要带on；

  2】listener：事件处理函数，事件发生时，会调用该监听函数；

  3】useCapture：可选参数，是一个布尔值，默认false。

  1·7·2 删除事件

  1】传统注册事件：

  eventTarget.οnclick=null;

  2】方法监听注册方式：

  1、eventTarget.removeEventListener(type,listener[,useCapture]);

  2、eventTarget.detachEvent(eventNameWithon,callback);

  1·7·3 DOM事件流

  事件流描述的是从页面中接收事件的顺序。

  事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

  DOM事件流分为3个阶段：

  1、捕获阶段

  2、当前目标阶段

  3、冒泡阶段

  事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

  事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

  注意：

  1. JS代码中只能执行捕获或者冒泡其中的一个阶段。

  2. onclick和attachEvent只能得到冒泡阶段。

  3. addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

  4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

  5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave。

  6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

  阻止事件冒泡：

  标准写法：利用事件对象里面的stopPropagation()方法。

  例如：

  son儿子

  1·7·4 事件对象

  官方解释：event对象代表事件对象的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

  简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

  事件对象的使用语法：

  div.onclick = function(event) {

  /这个event就是事件对象，可自己命名

  }

  123

  事件对象属性： 

  例如：

  鼠标事件对象：

  

  例如：

  输出结果：

  

  键盘事件对象：

  

  例如：

  注意：

  • onkeydown和onkeyup，不区分字母大小写，onkeypress区分字母大小写；

  • 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）；

  • keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

  事件委托（代理、委派）：

  事件委托也称事件代理，在jQuery里面称为事件委派。

  事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

  例如：
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！

• 效果展示：

  

  四、案例

  =====

  1·1 tab栏切换图片

  ---
• 所
• 见
• 即
• 所
• 得
• 

  效果：

  

  1·2 根据输入内容生成表格

  ---

  请输入姓名:

  
  请输入邮箱:

  姓名 邮箱 小黑 xiaohei@126.com

  效果：

  

  1·3 点击按钮改变盒子颜色

  ---

  改变

  效果：

  

  1·4 分时问候

  
  上午好

  效果：

  

  1·4 分时问候

  
  上午好