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)