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

 

Js事件流

上一篇:css布局中左侧固定右侧自适应


下一篇:Mybatis中Mapper的实现原理解析