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)