DOM的操作,事件

1.复制节点：

            cloneNode(deep)：deep = true/false

            参数deep是boolean类型。

            true：表示深度复制(将节点及其子节点都进行复制)---深拷贝

            false:表示浅复制(只复制节点而不复制子节点)---浅拷贝

 2.删除节点：

            removeChild(node)

            (1)参数node为要删除的节点

            (2)前提：被删除的节点必须为空(没有子节点)

            3.hasChildNodes():判断当前节点是否有子节点

                返回值为false表示没有子节点

                返回值为true表示有子节点

           

            3.替换节点：replaceChild(newNode,oldNode)

                (1)用newNode替换oldNode

对DOM的总结：

1.DOM:文档对象模型。一个HTML页面就是document对象

            1.DOM核心：document对象

            2.作用：在js程序中通过document对象操作HTML文档

2.通过DOM获取HTML页面中的元素

3.操作HTML页面中元素的属性

 4.操作HTML页面中元素的css样式

 5.操作元素节点

以下是有关事件的基础知识

事件处理

    1.基本概念

        1.事件：javascript可以侦测到的行为(用户在页面上进行的某种操作)

            页面加载(浏览器打开页面)，单击鼠标鼠标进入某个区域，焦点事件，键盘等

        2.事件处理程序：用户进行了某种操作以后所运行的JavaScript程序段

        3.事件驱动式：当事件发生后才去执行相应的程序

        4.事件流：事件发生时，会在发生事件的元素节点与DOM树之间按照特定的顺序进行传播，这个事件传播的过程就是事件

        5.在web中对事件流的解决方案：

            a.事件捕获：网景公司（Netscape）

             

 

            b.事件冒泡：微软公司（Microsoft）

                div-->body-->html-->dicument-->window

                冒泡的前提:父元素也定义了相应的事件，当子元素与父元素有相同的事件时子元素被触发父元素也会被触发

 

            c.w3c的事件流处理：在事件发生阶段采用捕获方式(此时不处理)，在事件处理阶段采用冒泡()

        6.事件捕获的实现：

            addEventListener(事件名,事件处理程序,useStatus（事件处理方式）)

            参数1：事件名(click,change,load,mousedown)

            参数2：事件处理程序

            参数3:  事件处理方式(true--表示采用事件捕获方式，false--表示采用事件冒泡方式)默认为false

 

    2.事件的绑定方式：

        (1)行内绑定式

            <标签名 事件名="事件处理程序"></标签名>

        (2)动态绑定式

            DOM对象名.事件名 = 事件处理程序

        注意:行内绑定式,动态绑定式的区别:

            不同点

            (1)"行内绑定式"事件名作为标签的属性，"动态绑定式"事件名作为DOM对象属性

            (2)事件处理程序中this的指向不同。"行内绑定式"指向window对象，"动态绑定式"指向当前正在操作的DOM元素对象           

            相同点:

                一个DOM对象的同一个事件只能有一个事件处理程序

        (3)事件监听式:可以给DOM对象的同一个事件绑定多个事件处理程序

            DOM对象.attachEvent(type,callback)//早期IE浏览器

            DOM对象.addEventListener(type,callback,[capture])//标准浏览器

 

    3.删除事件绑定：

        DOM对象.removeEventListener(type,callback)//标准浏览器

   

    4.事件对象：

        1.来源：当事件发生时，都会产生一个事件对象(event对象)

        2.作用:通过事件对象可以了解与事件相关的信息(DOM对象，事件的类型...)

        3.获取事件对象:

            (1)早期的IE浏览器:window.event

            (2)标准浏览器:将一个event对象直接传入事件处理程序中

        4.常用属性:

            (1)type:代表当前事件类型

            (2)target:返回触发次事件的元素(事件的目标节点)

            (3)currentTarget:返回其事件监听器触发该事件的元素

            (4)bubbles:表示事件是否是冒泡事件类型

 

        5.常用函数:

            (1)stopPropagation:阻止事件冒泡

            (2)preventDefault:阻止默认行为

 

    5.事件的分类:

        1.鼠标事件:

          click:单击

          mouseover:鼠标进入

          mouseout:鼠标离开