js事件流和DOM的增删改查

什么是事件流呢

事件：事件是文档和浏览器窗口中发生特定交互的瞬间，当我们与浏览器中的web页面进行某些类型交互的时候，事件就发生了

事件流：事件流描述的是页面中接受事件的顺序，微软为事件冒泡，网景为事件捕获

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

阻止事件冒泡和事件捕获
e.stopPropagation 阻止冒泡 vue中是 @click.stop
e.preventDefault 阻止捕获 vue中是 .prevent

DOM增删改查
节点查找API

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

增：

1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
 
  为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中
  
    //先创建li，然后插入到ul中
    var oul=document.querySelector('.list')
    //先创建一个文档碎片
    var fragment=document.createDocumentFragment();
   for(var i=0;i<100;i++) {
        var newLi=document.createElement('li');
        newLi.textContent=`项目${i+1}` 
        fragment.appendChild(newLi)  //已经将100个li添加到fragment上了

   }

   oul.appendChild(fragment);


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)

删

parent.removeChild(child)，删除元素必须知道其父元素
<div id="div1" style='background:pink'>
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

改

父节点.appendChild(子节点)  尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点)  替换节点

查

getElementById()  获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName()  获取表单中name名称  返回类数组
getElementsByClassName  只能获取class名称  返回类数组
querySelector  只获取匹配的第一个css选择器  //特别适合移动端
querySelectorAll  获取匹配的css选择器类数组 //特别适合移动端

//封装一个$
function $(selector) {
    return typeof selector==='string' ? document.querySelector(selector) : selector
}