HTML DOM 节点
HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点。
操作（以元素节点为属性学习）
属性（其余全部点这里）
| element.firstChild | 返回元素的第一个子节点 |
|---|---|
| element.lastChild | 返回最后一个子节点 |
| element.parentNode | 返回元素的父节点 |
| element.parentElement | 返回元素的父节点 |
| element.children | 返回元素的子元素的集合 |
| element.removeChild() | 删除一个子元素 |
| element.appendChild() | 为元素添加一个新的子元素 |
| element.insertBefore() | 现有的子元素之前插入一个新的子元素 |
方法
创建元素节点（通过文档对象document来创建）
2.其它事件
焦点事件
onblur 元素失去焦点时触发
onfocus 元素获取焦点时触发
事件总览看这里
注意：在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。
onkeypress 主要用于监听用户是否按下了大小写
排他事件
设置当前按钮背景颜色前，先把所有的按钮的背景颜色清除掉
var btns = document.querySelectorAll('button')
// 遍历按钮对象，添加点击事件
btns.forEach(function(item){
item.onclick = function(){
//设置当前按钮背景颜色前，先把所有的按钮的背景颜色清除掉（排他事件）
btns.forEach(function(btn){
btn.style.background = ''
})
// 再设置自己的
this.style.background = 'pink'
}
})
排他思想：先排除其他的样式，再设置自己的样式
3.事件高级
H5注册事件方式
传统注册方式
- 利用on开头的事件来注册
- 本质是设置属性，后面赋值的属性会覆盖前面的
- 同一个元素同一个事件，只能设置一个处理函数。后面注册的函数会覆盖前面的
H5监听注册
- 利用addEventListener
- 本质是调用方法，方法是可以多次调用的
- 同一个元素同一个事件，可以设置多个处理函数，会按照注册顺序依次执行
DOM事件流
事件流概念
事件发生的时候，会在元素节点之间按照特定顺序传播。这个传播的过程就叫事件流。
事件捕获
网景--w3c() html1-4 HTML5兼容性较好
网景公司最早提出的观点是，事件开始是由DOM最顶层的节点接收，然后逐级向下传播到最具体的元素。
事件冒泡
IE 最早提出的观点，事件最开始是由最具体的元素接收，然后逐级向上传播到DOM最顶层的节点。
W3c统一了说法：事件是先捕获，再冒泡。
将DOM事件流分为三个阶段
- 捕获阶段
- 到达当前目标阶段（到达当前具体点击的元素）
- 冒泡阶段
addEventListener
document.addEventListener() 方法用于向文档添加事件句柄。
提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
提示： 使用 element.addEventListener() 方法为指定元素添加事件句柄。
document.addEventListener(event, function, useCapture)
| 参数 | 描述 |
|---|---|
| event | 必需。描述事件名称的字符串。 注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册 |
| function | 必需。描述了事件触发后执行的函数。 当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。 可能值：- true - 事件句柄在捕获阶段执行 |
- false- 默认。事件句柄在冒泡阶段执行 |
注意：传统注册事件的方法（onclick绑定），只能得到冒泡阶段
实际开发中，很少使用事件捕获，对事件冒泡更关注。且有些事件是没有冒泡的。比如onblur，onfocus，onmouseenter，onmouseleave。
