事件流：事件触发的顺序
事件流包括三个阶段：捕获阶段，目标阶段，冒泡阶段
冒泡阶段：事件由最具体元素触发，向上传播的过程
目标阶段：就是你最终触发的那个元素（即目标元素）
捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反
冒泡排序：是数组排序算法 注意和事件冒泡是不同
阻止冒泡： e.stopPropagation(); //同时会阻止冒泡和捕获
阻止默认行为: e.preventDefault();
DOM常用操作方法
创建（增）
1.createElement() 创建标签 2.createTextNode() 创建文本 3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的 为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中 4.cloneNode(true) 克隆 //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来
修改:
父节点.appendChild(子节点) 尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点) 替换节点
查询
getElementById() 获取id ，如果页面上有多个相同id，只返回第一个 getElementsByTagName() 获取标签名 返回是类数组 getElementsByName() 获取表单中name名称 返回类数组 getElementsByClassName 只能获取class名称 返回类数组 querySelector 只获取匹配的第一个css选择器 //特别适合移动端 querySelectorAll 获取匹配的css选择器类数组 //特别适合移动端
节点关系
parentNode:找父节点 parentElement：找父元素 previousSibling：找前一个兄弟节点 previousElementSibling：找前一个兄弟元素 nextSibling：找后一个兄弟节点 nextElementSibling：找后一个元素节点 childNodes:属性，即包括元素节点，也包括文本节点 children:属性 只获取直接子级元素，不获取文本节点（元素类型===1） firstNode：找第一个节点 lastNode：找最后一个节点 hasChildNodes：用于判断是否有子元素
属性型
setAttribute
getAttribute