5.节点操作
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
1.概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
注:我们在实际开发中，节点操作主要操作的是元素节点
2.节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
父级节点
node.parentNode
注:
parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null
子节点
(1) parentNode.childNodes （标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
var ul = document. querySelector(‘ul’); for(var i = 0; i < ul.childNodes.length;i++) { if (ul.childNodes[i].nodeType == 1) { // ul.childNodes[i] 是元素节点 console.log(ul.childNodes[i]); } }
(2) parentNode.children （非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
(3) parentNode.firstChild firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。 (4) parentNode.lastChild lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。 (5) parentNode.firstElementChild firstElementChild 返回第一个子元素节点，找不到则返回null。 (6) parentNode.lastElementChild lastElementChild 返回最后一个子元素节点，找不到则返回null。
兄弟节点
(1)node.nextElementSibling nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。 (2) node.previousElementSibling previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注:实际开发中使用的很少,了解即可
- 创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
node.appendChild(child)//将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。 node.insertBefore(child, 指定元素)//将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
6. 删除,复制节点
node.removeChild(child)//从 DOM 中删除一个子节点，返回删除的节点 node.cloneNode()//返回调用该方法的节点的一个副 1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
五.事件高级
1.注册事件（绑定事件）
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
利用 on 开头的事件 onclick
<button onclick=“alert('hi~')”></button> btn.onclick = function() {}
特点： 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习
attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。
这个知道就行,现在几乎不用.
2. 删除事件（解绑事件）
- 传统注册方式
eventTarget.onclick = null;
- 方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]); ② eventTarget.detachEvent(eventNameWithOn, callback);
3.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件：
DOM 事件流分为3个阶段：
捕获阶段
当前目标阶段
冒泡阶段
事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收
1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。 2. onclick 和 attachEvent 只能得到冒泡阶段。 3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕 获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理 程序。 4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。 5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave 6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件
4.事件对象
官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
谁绑定了这个事件。
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的使用语法
eventTarget.onclick = function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener('click', function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt }）
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
e.target 和 this 的区别：
this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素） e.target 是事件触发的元素。
事件对象的常见属性和方法
5.阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处
阻止事件冒泡的里昂中方式
- 标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;
6.事件委托（代理、委派）
7.常用的鼠标事件
- 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) { e.preventDefault(); })
- 禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) { e.preventDefault(); })
鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。
