js事件流，dom操作的方法

js事件流，dom操作的方法
事件流：
事件流：也就是事件触发的顺序

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

事件冒泡：事件由最具体元素触发，向上传播的过程；

处于目标阶段：触发事件的那个节点，（目标元素）；

捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反；

阻止冒泡： e.stopPropagation();

事件代理（事件委派）：在父级上绑定事件，通过e.target来获取触发的目标。

Dom操作的方法
通过:nodeType来检测节点类型，
增删改查：
增：

1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
 //createDocumentFragment()：为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中
 4.cloneNode(true)  克隆  //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来

例如：
 //需求：创建一个div，并添加文字，追加到页面上
 var odiv=document.createElement('div');
 var otext=document.createTextNode('1906A')

//将文本追加到div上  appendChild
odiv.appendChild(otext);

//再将div追加到body上
document.body.appendChild(odiv)

删、修改：

父节点.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：用于判断是否有子元素

设置属性

获取： getAttribute('title')
设置： setAttribute('title','修改的属性')

样式型

window.getComputedStyle：获取css样式
getBoundingClientRect  获取dom的位置信息

可以参考文档：
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle