Js原生如何操作Dom方法

**

DOM操作方法

**
原生js5中操作dom一共是有三种方法：
第一种：标签式的绑定（HTML事件处理）
第二种：DOM0级事件处理
第三种:DOM2级事件处理
但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。
下面呢我将详细的演示一遍：
DOM事件绑定（增删改查）三个方法：
html事件处理

//<!-- 标签绑定 -->
<button οnclick="get">获取</button>
//<!-- 优点：兼容性好
//缺点：不容易维护 三火灾标签中 耦合度太高 -->

DOM0级事件处理
这个呢 PC端相对来说用的多，兼容性也好，但是支持冒泡 不支持捕获

<button class="btn">11</button>
  var btn=document.querySelector('.btn')

  btn.onClick=function(){
   console.log(111)
  }
//移除的话也是非常简单
btn.onClick=null//置为空就好啦

DOM2级事件绑定
移动端用的比较多，也有很多的有点，提供了专门的绑定和移除。支持给多个元素多个相同事件，支持冒泡和捕获。

<button class="btn">11</button>
 var btn=document.querySelector('.btn')
  // 一个是我们绑定事件名，监听的函数，第三个是是否冒泡 false为不冒泡
 btn.addEventListener('click',func,false)
 function func(){
console.log(222)
 }
 btn.addEventListener('click',fun2,false)
 function fun2(){
console.log(888)
 }
 //移除事件 
 btn.removeEventListener('click',fun2,false)