DOM文档对象模型课件.ppt

1、第三章第三章 DOM文档对象模型文档对象模型主要内容：主要内容：l基本概念l节点引用l节点操作l控制节点样式重点、难点：重点、难点：l全部基本概念基本概念l树形结构树形结构在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的document对象，树的每个子节点表示HTML文档中的不同内容。l节点的类型和组成节点的类型和组成第三章第三章 DOM文档对象模型文档对象模型接口接口nodeType值值说明说明Element1元素元素Attr2属性属性Text3文本文本Comment8注释注释Document9文档文档DocumentFragment11文档片段

2、文档片段基本概念基本概念l节点之间的关系节点之间的关系 三种关系：父子关系、兄弟关系和祖孙关系。如上图，我们能明显看出这三种关系。第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l根据根据id属性引用节点属性引用节点 根据id获取节点 var MyElement=document.getElementById(ById); alert(MyElement.innerHTML); 注意这里的js代码，是放在div元素后面的位置。浏览器首先必须解析到div这个元素，然后js才能通过代码获取到这个元素，否则，会提示错误。这里用的是document的getElementById方法注意

3、大小写，参数是某个元素的id属性第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l根据根据name属性引用节点属性引用节点 var MyElement=document.getElementsByName(ByName); alert(MyElement.length); 同样这里的js代码也是写在后面的，和上面的例子一个道理这里注意，document.getElementsByName方法通过元素的name属性，获取一个元素的集合，我们通过length属性获得了集合的长度。当然输出结果应该是：2。如果我们想获取某一个元素，使用索引的方式即可。MyElement0;/获得第一个

4、元素第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题小明正在做学校选课系统网站，大一新生有且只能选择一门体育课程，选修的课程如下：排球，篮球，羽毛球，网球，足球，乒乓球，铅球，跳高，跳远。排球，篮球，羽毛球，网球，足球，乒乓球，铅球，跳高，跳远。用户点击提交按钮后，提示用户用户点击提交按钮后，提示用户“您选择了您选择了xx体育课程，操作完体育课程，操作完成成”。试帮助他实现这一功能。提示：使用getElementsByName第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l根据标签引用节点根据标签引用节点 1 2 3 4 var liList=d

5、ocument.getElementsByTagName(li); alert(liList.length); 这里注意，document. getElementsByTagName方法通过元素的标签，获取一个元素的集合，我们通过length属性获得了集合的长度。当然输出结果应该是：4。如果我们想获取某一个元素，使用索引的方式即可。liList0;/获得第一个元素第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题小明正在做学校选课系统网站，大二学生可以选择2-4门体育课程，选修的课程如下：排球，篮球，羽毛球，网球，足球，乒乓球，铅球，跳高，跳远。排球，篮球，羽毛球，

6、网球，足球，乒乓球，铅球，跳高，跳远。用户点击提交按钮后，提示用户用户点击提交按钮后，提示用户“您选择了您选择了xx、xx、xx体育课程，体育课程，操操作完成作完成”。如果用户选择的课程不在。如果用户选择的课程不在2-4这个范围内，提示用户这个范围内，提示用户“选选择择的课程数目，必须在的课程数目，必须在2-4门之间，操作失败门之间，操作失败”试帮助他实现这一功能。提示：使用getElementsByTagName第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l引用父节点引用父节点Node对象提供了parentNode属性来引用当前节点的父节点。 var son=docume

7、nt.getElementById(son); alert(son.parentNode.id); 找到son节点的父节点father输出结果：father第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题根据实例实现要求。如右图：当鼠标滑过某一个选项后，显示该选项下面的所有信息，其他选择的内容全部隐藏。第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l引用子节点引用子节点Node对象提供了3个属性来引用其直属直属子节点：childNodes，firstChild和lastChild代码： var father=document.getElement

8、ById(father); alert(father.firstChild.id);/第一个子节点son alert(father.lastChild.id);/最后一个子节点brother alert(father.childNodes.length);通过father.childNodes，可以获得所有节点的集合这里输出的是所有节点的数量使用索引的方式获得某一个子节点father.childNodes0第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题根据实例实现要求。如图(提供页面)： 第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l引用相邻

9、的节点引用相邻的节点Node对象提供了previousSibling和nextSibling来获取上一个和下一个兄弟节点的引用。 var son=document.getElementById(son); alert(son.previousSibling.id);/上一个兄弟节点 smallSon alert(son.nextSibling.id);/下一个兄弟节点 brother第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题根据实例实现要求。如右图：当鼠标滑过某一个选项后，显示该选项的上一个相邻和下一个相邻节点的所有信息，其他选择的内容全部隐藏。如图：鼠标滑

10、过net6，显示net5和net7的信息。第三章第三章 DOM文档对象模型文档对象模型节点的操作节点的操作l创建元素节点创建元素节点 document.createElement(div);l创建文本节点创建文本节点 document.createTextNode(文本内容);l添加节点添加节点 var newDiv=document.createElement(div); newDiv.innerHTML=新的div; document.form1.appendChild(newDiv);在页面上添加一个div注意：appendChild只能在最后添加一个元素。第三章第三章 DOM文档对象模

11、型文档对象模型节点的操作节点的操作l插入节点插入节点Node对象提供了insertBefore将新节点插入到指定元素的前面parentNode. insertBefore(newNode,childNode);parentNode父节点newNode新节点childNode 插入到该节点的前面 var son=document.getElementById(son); var father=document.getElementById(father); var newDiv=document.createElement(div); newDiv.innerHTML=新的div; father

12、.insertBefore(newDiv,son);显示结果如图：第三章第三章 DOM文档对象模型文档对象模型节点的操作节点的操作l替换子节点替换子节点Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点：parentNode. replaceChild(newNode,childNode);parentNode父节点newNode新节点childNode 要替换的节点 var son=document.getElementById(son); var father=document.getElementById(father); var newDiv=documen

13、t.createElement(div); newDiv.innerHTML=新的div; father.replaceChild(newDiv,son);效果如图：son节点被替换第三章第三章 DOM文档对象模型文档对象模型节点的操作节点的操作l复制节点复制节点Node对象提供了cloneNode方法来得到Node对象的一个副本。cloneNode方法接受一个布尔值参数，来标识返回的节点副本中是否包含原节点的子节点。代码： var son=document.getElementById(son); var cloneDiv=son.cloneNode(false); cloneDiv.inn

14、erHTML=克隆son节点; father.appendChild(cloneDiv); 当参数为false，表示不复制子节点，否则复制子节点。第三章第三章 DOM文档对象模型文档对象模型节点的操作节点的操作l删除子节点删除子节点Node对象提供了removeChild方法来删除一个子节点。cloneNode方法接受一个对象参数，该参数指示所要删除的子节点。代码： var son=document.getElementById(son); var grandchild=document.getElementById(grandchild); son.removeChild(grandchil

15、d); l 读取节点属性读取节点属性 var son=document.getElementById(son); alert(son.getAttribute(id);使用getAttribute方法获取某一个指定的属性值。第三章第三章 DOM文档对象模型文档对象模型节点的操作节点的操作l添加和修改节点属性添加和修改节点属性 链接 var a=document.getElementById(a); a.setAttribute(href,DomDemo.aspx);使用setAttribute设置元素的某一个属性第一个参数：所要设置的属性第二个参数：要设置的属性值通过这个方法即可修改元素属性，

16、也可以添加元素属性。l删除属性节点a.removeAttribute(href);第三章第三章 DOM文档对象模型文档对象模型控制元素的样式控制元素的样式l获取和设置元素的获取和设置元素的CSS类类 CSS代码： .color color:red; var a=document.getElementById(a); a.className=color; 修改了a的属性class,使得a元素应用了color这个样式，结果该元素颜色变成红色。第三章第三章 DOM文档对象模型文档对象模型控制元素的样式控制元素的样式l获取和设置元素的获取和设置元素的CSS类样式类样式 var a=document.g

17、etElementById(a); a.style.color=color; 设置了a的属性style中的color, 结果该元素颜色变成红色。同理，我们可以设置元素style中的任何属性。第三章第三章 DOM文档对象模型文档对象模型节点的引用节点的引用l练习题练习题根据实例实现要求。在页面上动态添加文本框。动态删除文本框。观看效果。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理事件模型和传播机制事件模型：l 标准模型：有标准模型：有w3c组织制定，火狐等浏览器支持组织制定，火狐等浏览器支持l ie模型：有模型：有ie浏览器支持浏览器支持两种模型的区别1：Ie模型中，模型中，wi

18、ndow对象提供了一个对象提供了一个event属性来保存当前事件对象，所以可以属性来保存当前事件对象，所以可以象使用全局变量一样使用该属性。象使用全局变量一样使用该属性。标准模型中，事件对象是一个局部变量，只在事件被触发时产生。标准模型中，事件对象是一个局部变量，只在事件被触发时产生。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理对区别的具体分析：l Ie模型代码：模型代码：window.onload=function() alert(window.event.type); l 标准标准模型代码：模型代码：window.onload=function(e) alert(e.typ

19、e); 显然，我们看出显然，我们看出window.event并没有定义直接使用，当做全局变量使用并没有定义直接使用，当做全局变量使用e.type e变量，是我们在函数内部创建的，指向当前触发的事件。变量，是我们在函数内部创建的，指向当前触发的事件。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理区别2：传播机制的不同：传播机制的不同：标准模型的传播机制分为三个阶段：l 捕捉捕捉l 目标节点触发事件目标节点触发事件l 冒泡冒泡注意，捕捉和冒泡只会执行一个，默认情况是冒泡。注意，捕捉和冒泡只会执行一个，默认情况是冒泡。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理区别2：

20、传播机制的不同：传播机制的不同：Ie模型的传播机制分为两个阶段：l 目标节点触发事件目标节点触发事件l 冒泡冒泡显然，显然，ie没有捕捉阶段。没有捕捉阶段。下面，我们用代码来说明到底什么是捕捉，什么是冒泡。下面，我们用代码来说明到底什么是捕捉，什么是冒泡。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-注册事件注册事件讲解捕捉和冒泡之前，必须先要学习如何注册事件如何注册事件1。我们可以使用下面的方式1来注册事件var liList=document.getElementsByTagName(a); for(var i=0;iliList.length;i+) liListi.on

21、click=function() myEventHandlerA(); ; 上面的代码，找到页面中所有的a，给a标签添加了onclick事件。这种形式的注册，在ie和标准模型中均可使用。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-注册事件注册事件如何注册事件如何注册事件2：这里注意，ie和标准模型，两个注册事件的方式不同：Ie： function myEventHandler2(e) alert(“ie事件注册); var ulList=document.getElementsByTagName(li); for(var i=0;iulList.length;i+) ulLi

22、sti.attachEvent(onclick,myEventHandler2); 上面的代码，找到所有的li标签，给他们添加了onclick事件，注意这里用的是attachEvent方法。该方法接受两个参数：事件名称，事件处理函数。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-注册事件注册事件如何注册事件如何注册事件3：标准： function myEventHandler2(e) alert(标准事件注册); var ulList=document.getElementsByTagName(li); for(var i=0;iulList.length;i+) ulList

23、i.addEventListener(click,myEventHandler2,false); 上面的代码，找到所有的li标签，给他们添加了onclick事件，注意这里用的是addEventListener方法。该方法接受三个参数：事件名称，事件处理函数，处理机制（是冒泡还是捕捉）。注意这里的第一个参数，是不需要加注意这里的第一个参数，是不需要加on的的第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-捕捉与冒泡捕捉与冒泡捕捉和冒泡捕捉和冒泡好了，现在我们了解了必备的知识以后，开始来分析什么是捕捉什么是冒泡。简单说捕捉就是自上而下，冒泡就是自下而上。前面，我们提到了ie是没有捕捉

24、的，所以我们使用火狐来演示什么是冒泡什么是捕捉。标准默认标准默认标准捕捉标准捕捉标准冒泡标准冒泡第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理练习题：实现鼠标滑过，背景色变化。如效果。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理阻止冒泡：阻止冒泡：既然有冒泡这种情况，我们是否可以阻止冒泡呢？有这样的代码： function stopBubble(e)/阻止事件冒泡的通用方法 if(e&e.stopPropagation) e.stopPropagation(); else window.event.cancelBubble=true; 第三章第三章 DOM文档对象

25、模型文档对象模型事件处理事件处理阻止冒泡的实际应用：阻止冒泡的实际应用：题目：为页面上的所有标签添加onmouseover和onmouseout事件，当鼠标滑过 背景色变化，鼠标离开，背景色恢复。查看实际效果。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-注册事件注册事件通用注册事件通用注册事件由于由于ie和标准两个模型的注册事件不同，就给我们带来了很多不便，和标准两个模型的注册事件不同，就给我们带来了很多不便，于是，我们可以把两种注册事件混合成一个方法，该方法既能够在于是，我们可以把两种注册事件混合成一个方法，该方法既能够在ie中中使用也能在火狐中使用。混合后的代码如下：使用

26、也能在火狐中使用。混合后的代码如下：function addEvent(obj,name,handler,userCaputure) if(window.event) obj.attachEvent(on+name,handler); else obj.addEventListener(name,handler,userCaputure); 第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-注销事件注销事件既然有注册事件，自然会有注销事件既然有注册事件，自然会有注销事件注册有：注册有：addEventListener，attachEvent注销注销有：有：removeEventLi

27、stener，detachEvent通用注销方法：通用注销方法：function removeEvent(obj,name,handler,userCaputure) if(window.event) obj.detachEvent(on+name,handler); else obj.removeEventListener(name,handler,userCaputure); 第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-事件对象事件对象我们前面所见过的我们前面所见过的window.event 就是事件对象，那么该对象还有很多的就是事件对象，那么该对象还有很多的属性和方法，

28、下面我们来了解下。属性和方法，下面我们来了解下。我们了解到我们了解到ie和火狐的事件对象是不一样的，所以他们的属性和方法也不一样和火狐的事件对象是不一样的，所以他们的属性和方法也不一样查看下表查看下表: 第三章第三章 DOM文档对象模型文档对象模型标准标准IE说明说明targetsrcElement目标目标type/事件名称事件名称keyCode/键盘码键盘码clientX，clientY/鼠标坐标（相对于窗口左上角）鼠标坐标（相对于窗口左上角）preventDefault()returnValue取消默认取消默认stopPropagation()cancelBubble取消冒泡取消冒泡alt

29、Key,ctrlKey,shiftKey/事件处理事件处理-事件对象事件对象那么这些属性和方法有什么用途呢？那么这些属性和方法有什么用途呢？我们来举例说明：我们来举例说明：练习题练习题1：一个文本框，一个按钮，当用户输入文本框，点击按钮，或者按下：一个文本框，一个按钮，当用户输入文本框，点击按钮，或者按下回车键的时候，弹出文本框的值。回车键的时候，弹出文本框的值。查看效果查看效果.第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-事件对象事件对象练习题练习题2：( 要求只能给要求只能给table添加事件添加事件)如效果。如效果。第三章第三章 DOM文档对象模型文档对象模型事件处理事件处理-常用事件常用事件课本课本139页页第三章第三章 DOM文档对象模型文档对象模型事件相关练习事件相关练习练习题1：悬浮广告如效果第三章第三章 DOM文档对象模型文档对象模型事件相关练习事件相关练习练习题2：可拖动层如效果第三章第三章 DOM文档对象模型文档对象模型