Web API及DOM介绍(三)
本篇是DOM系列的最后一篇啦~本篇主要内容为节点操作、事件和DOM事件流。
目录
一、节点操作
1.节点概述
2.节点层级
3.节点操作
4.案例--简易留言板的制作
二、DOM核心操作小结
元素的创建、增删改查、属性操作
三、事件操作
1.注册事件
2.删除事件（解绑事件）
四、DOM事件流
1.事件流概述
1.1什么是事件流和DOM事件流？
1.2DOM事件流的三个阶段
2.事件对象
什么是事件对象？
事件对象的属性和方法
阻止默认行为
事件委托
3.常用鼠标事件
3.1鼠标事件
3.2鼠标事件对象
4. 常用的键盘事件
4.1键盘事件
4.2键盘事件对象
一、节点操作
1.节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
| 节点类型 | 节点名称 |
|---|---|
| 元素节点 | HTML标签的名称（大写） |
| 属性节点 | 属性的名称 |
| 文本节点 | 它的值永远是#text |
| 文档节点 | 它的值永远是#document |
我们知道， 利用DOM树可以把节点划分为不同之间的为不同的层级关系，常见的是父子兄层级关系。当我们需要获取的元素过多时，可以使用节点关系对元素进行操作。
2.节点层级
1.父级节点
node.parentNode --最近的一个父节点（亲）
如果指定的节点没有父节点则返回null
2.子节点
- parentNode.childNodes（标准） 返回值里包含了所有的子节点（文本、元素等）
- parentNode.children(非标准) 只返回子元素节点，其余节点不返回
parentNode.children是一个只读属性，在实际开发中应用广泛。
返回子元素的第一个节点/最后一个节点
- parentNode.firstChild/parentNode.lastChild 返回全部节点
- parentNode.firstElementChild/parentNode.lastElementChild返回相应子元素节点，有兼容性问题
- parentNode.childre[0]/parentNode.children[element.children.length - 1]
3.兄弟节点
返回当前元素下一个兄弟节点/返回当前元素的上一个兄弟节点
- node.nextSibling /node.previousSibling 返回全部节点
- node.nextElementSibling/node.previousElementSibling 返回元素节点，有兼容性
3.节点操作
1.创建节点
document.createElement('tagName')
2.添加节点
- 添加到列表末尾：node.appendChild(child)
- 添加到指定子节点前面：node.insertBefore(child,指定元素)
3.删除节点
node.removeChild(child)
如果想要阻止链接跳转行为，可以使用javascript:void(0);或者javascript:;语句。
4.克隆节点
node.cloneNode()
注意：
1.如果括号参数为空或者false，即浅拷贝，只复制节点本身，不复制内容
2.如果括号参数为true，即深拷贝，复制节点本身和所有子节点
4.案例--简易留言板的制作
效果要求：
- 可以在文本框里面输入内容，点击发表将文本框的内容发布在下方。
- 发布的内容可以删除。
思路：动态创建、删除节点。
案例代码：
留言板
二、DOM核心操作小结
元素的创建、增删改查、属性操作
1.动态创建元素
1.document.write()
2.element.innerHTML
3.document.createElement()
区别：
- document.write() 是直接将内容写入到页面的内容流，但是文档流执行完毕，回导致页面全部重绘
- innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTMl创建多个效率更高，注意是使用数组形式拼接时效率最高，但是结构稍微复杂，当采用拼接字符串形式时，比createElement()效率低。
- createElement()创建多个元素效率比innerHTML数组形式稍低，但是结构更清新。
总结：不同浏览器下，innerHTML效率比createElement()高
2.增加元素
1.appendChild
2.insertBefore
3.删除元素
removeChild
4.修改元素
主要修改DOM元素属性。dom元素的内容、属性、表单的值等
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
5.查找元素
主要获取查询DOM的元素
1.DOM提供的API方法：getElementById、getElementByTagName
2.H5提供的新方法：querySelector、querySelectorAll
3.利用节点操作获取：父(parentNode)、子（children）、兄（previousElementSibling、nextElementSibiling）
6.属性操作
主要针对自定义属性
1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移除属性
三、事件操作
1.注册事件
给元素添加事件，称为注册事件或者绑定事件，注册事件的方式有两种，传统方式和监听器注册方式。
事件监听
1.addEventListener()事件监听 （IE9以后支持）
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
2.attacheEvent()事件监听 （IE678支持）
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
总结：在实际开发中我们一般用addEventListener()事件监听事件，如果需要考虑兼容性可以封装一个函数。
2.删除事件（解绑事件）
1.传统注册方式：eventTarget.onclick = null
2.方法监听注册方式：
①removeEventListener(type，listener[,useCapture]）
②detachEvent(eventNameWithon,callback)
同样的，有关兼容性的问题，我们可以采取封装一个函数解决。
四、DOM事件流
1.事件流概述
1.1什么是事件流和DOM事件流？
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
1.2DOM事件流的三个阶段
1）事件捕获阶段
2）处于目标阶段
3）事件冒泡阶段
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
注意：
- js代码种只能执行捕获或者冒泡的其中一个阶段
- onclick和attachEvent只能得到冒泡阶段
- addEventListener()中的第三个参数如果是true ，表示事件捕获阶段（从大到小），如果是false或者空，则为事件冒泡阶段（从小到大）
- 实际开发中我们很少使用事件捕获，更关注事件冒泡
- 有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave
2.事件对象
-
什么是事件对象？
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
事件对象的使用
事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。
1. eventTarget.onclick = function(event){ }
2.eventTarget.addEventListener('click',function(event){})
3.eventTarget.addEventListener('click',fn)
function(event){}
里面的event就是事件对象，也可以写成e或者evt。
注意：在IE6-8中，需要使用window.event获取查找。
-
事件对象的属性和方法
常见的事件对象的属性和方法见下表。
- e.target 和 this 的区别
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
e.target 是事件触发的元素。
通常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象，而target指向的是子元素，因为他是触发事件的那个具体元素对象。
-
阻止默认行为
1.preventDefault() --dom标准写法 （这是一个方法！！带()）
2.returnValue --ie678适用 （这是一个属性！！）
3.return false --无兼容性问题 但是return后面的代码不执行 只限于传统注册方式
百度
阻止事件冒泡
事件冒泡本身的特性，会带来坏处，也会带来好处。下面是阻止事件冒泡的方法和属性。
1. e.stopPropagation() --标准写法，这是一个方法
2. e.cancelBubble = true; --非标准，IE6-8适用，这是一个属性
-
事件委托
事件委托就是把事情委托给别人，代为处理。即利用事件冒泡的特性，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的作用：
- 我们只操作了一次 DOM ，提高了程序的性能。
- 动态新创建的子元素，也拥有事件。
3.常用鼠标事件
3.1鼠标事件
常用的鼠标事件如下表：
案例：禁止选中文字和禁止右键菜单
案例代码：
我是一段不愿意分享的文字
3.2鼠标事件对象
案例：跟随鼠标移动的图片
效果要求：图片跟随鼠标进行移动。
案例思路：
- 鼠标不断的移动，使用鼠标移动事件：mousemove
- 给图片设置绝对定位，当鼠标移动，获取最新的鼠标坐标，把x，y坐标作为图片的left值和top值。
案例代码：
Document
4. 常用的键盘事件
4.1键盘事件
常见的键盘事件见下表：
注意：
- 如果使用addEventListener不需要加on
- onkeypress和onkeyup、onkeydown的区别是，它不识别功能键。
- 三个事件的执行顺序为:keydowm -- keypress --keyup
4.2键盘事件对象
注意：
- onkeydowm和onkeyup 不区分字母大小写，onkeypress区分字母大小写。
- 在我们实际开发中，使用更多的是keydown和keyup，它能识别所有的键。
- keypress不识别功能键，但keyCode属性能区分大小写，返回不同的ASCii值。
案例：模拟京东快递单号查询
效果要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
案例思路：
1.输入内容，上方的大号字体盒显示，并将表单里的值赋给这个con盒子。
2.如果表单中无内容，则隐藏这个con盒子。
3.失去焦点，隐藏con盒子，获得焦点，且文本框内容不为空，就显示con盒子。
4.注意：keydowm和keypress在文本框中的特点：这两个事件触发时，文字还没落入文本框中，而keyup事件触发时，文字已经落入文本框里了。
案例代码：
Document
123
至此，我们就将JavaScript中DOM的相关内容介绍的差不多啦，里面有很多方法和属性需要我们掌握。下一次的内容就是JavaScript中三大核心中的浏览器对象模型，即BOM。
