Javascript原生的DOM操作方法

Javascript的DOM操作方法

• 原生js5中操作dom一共是有三种方法：

1. 第一种：标签式的绑定（HTML事件处理）
2. 第二种：DOM0级事件处理
3. 第三种:DOM2级事件处理

• 但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。 但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！
• 补充一个面试题
  vue 和jQuery最大的区别：
  jQuery：是一个操作DOM的神奇，
  我们可以通过$(),ajax $().get等
  vue呢 是数据驱动组件化，当然我们可以通过ref来操作dom。

下面呢我将详细的演示一遍：
DOM事件绑定（增删改查）三个方法：

html事件处理

//<!-- 标签绑定 -->
<button onclick="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)