Js事件流

 事件流：事件触发的顺序

事件流包括三个阶段：捕获阶段，目标阶段，冒泡阶段

冒泡阶段：事件由最具体元素触发，向上传播的过程
目标阶段：就是你最终触发的那个元素（即目标元素）
捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反

冒泡排序：是数组排序算法 注意和事件冒泡是不同

阻止冒泡： 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