Javascript的DOM操作方法
- 原生js5中操作dom一共是有三種方法:
- 第一種:標籤式的綁定(HTML事件處理)
- 第二種:DOM0級事件處理
- 第三種: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)