DOM文档对象模型课件.ppt

《DOM文档对象模型课件.ppt》由会员分享，可在线阅读，更多相关《DOM文档对象模型课件.ppt（42页珍藏版）》请在三一办公上搜索。

1、第三章 DOM文档对象模型,主要内容：基本概念节点引用节点操作控制节点样式重点、难点：全部,基本概念树形结构在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的document对象，树的每个子节点表示HTML文档中的不同内容。节点的类型和组成,第三章 DOM文档对象模型,基本概念节点之间的关系 三种关系：父子关系、兄弟关系和祖孙关系。如上图，我们能明显看出这三种关系。,第三章 DOM文档对象模型,节点的引用根据id属性引用节点 根据id获取节点 var MyElement=document.getElementById(ById);alert(MyEl

2、ement.innerHTML);注意这里的js代码，是放在div元素后面的位置。浏览器首先必须解析到div这个元素，然后js才能通过代码获取到这个元素，否则，会提示错误。这里用的是document的getElementById方法注意大小写，参数是某个元素的id属性,第三章 DOM文档对象模型,节点的引用根据name属性引用节点 var MyElement=document.getElementsByName(ByName);alert(MyElement.length);同样这里的js代码也是写在后面的，和上面的例子一个道理这里注意，document.getElementsByName方法

3、通过元素的name属性，获取一个元素的集合，我们通过length属性获得了集合的长度。当然输出结果应该是：2。如果我们想获取某一个元素，使用索引的方式即可。MyElement0;/获得第一个元素,第三章 DOM文档对象模型,节点的引用练习题小明正在做学校选课系统网站，大一新生有且只能选择一门体育课程，选修的课程如下：排球，篮球，羽毛球，网球，足球，乒乓球，铅球，跳高，跳远。用户点击提交按钮后，提示用户“您选择了xx体育课程，操作完成”。试帮助他实现这一功能。提示：使用getElementsByName,第三章 DOM文档对象模型,节点的引用根据标签引用节点 1 2 3 4 var liList

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

5、体育课程，操作完成”。如果用户选择的课程不在2-4这个范围内，提示用户“选择的课程数目，必须在2-4门之间，操作失败”试帮助他实现这一功能。提示：使用getElementsByTagName,第三章 DOM文档对象模型,节点的引用引用父节点Node对象提供了parentNode属性来引用当前节点的父节点。var son=document.getElementById(son);alert(son.parentNode.id);找到son节点的父节点father输出结果：father,第三章 DOM文档对象模型,节点的引用练习题根据实例实现要求。如右图：当鼠标滑过某一个选项后，显示该选项下面的所

6、有信息，其他选择的内容全部隐藏。,第三章 DOM文档对象模型,节点的引用引用子节点Node对象提供了3个属性来引用其直属子节点：childNodes，firstChild和lastChild代码：var father=document.getElementById(father);alert(father.firstChild.id);/第一个子节点son alert(father.lastChild.id);/最后一个子节点brother alert(father.childNodes.length);通过father.childNodes，可以获得所有节点的集合这里输出的是所有节点的数量使

7、用索引的方式获得某一个子节点father.childNodes0,第三章 DOM文档对象模型,节点的引用练习题根据实例实现要求。如图(提供页面)：,第三章 DOM文档对象模型,节点的引用引用相邻的节点Node对象提供了previousSibling和nextSibling来获取上一个和下一个兄弟节点的引用。var son=document.getElementById(son);alert(son.previousSibling.id);/上一个兄弟节点 smallSon alert(son.nextSibling.id);/下一个兄弟节点 brother,第三章 DOM文档对象模型,节点的引

8、用练习题根据实例实现要求。如右图：当鼠标滑过某一个选项后，显示该选项的上一个相邻和下一个相邻节点的所有信息，其他选择的内容全部隐藏。如图：鼠标滑过net6，显示net5和net7的信息。,第三章 DOM文档对象模型,节点的操作创建元素节点 document.createElement(div);创建文本节点 document.createTextNode(文本内容);添加节点 var newDiv=document.createElement(div);newDiv.innerHTML=新的div;document.form1.appendChild(newDiv);在页面上添加一个div注意

9、：appendChild只能在最后添加一个元素。,第三章 DOM文档对象模型,节点的操作插入节点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.inner

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

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

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

13、ert(son.getAttribute(id);使用getAttribute方法获取某一个指定的属性值。,第三章 DOM文档对象模型,节点的操作添加和修改节点属性 链接 var a=document.getElementById(a);a.setAttribute(href,DomDemo.aspx);使用setAttribute设置元素的某一个属性第一个参数：所要设置的属性第二个参数：要设置的属性值通过这个方法即可修改元素属性，也可以添加元素属性。删除属性节点a.removeAttribute(href);,第三章 DOM文档对象模型,控制元素的样式获取和设置元素的CSS类 CSS代码：.

14、color color:red;var a=document.getElementById(a);a.className=color;修改了a的属性class,使得a元素应用了color这个样式，结果该元素颜色变成红色。,第三章 DOM文档对象模型,控制元素的样式获取和设置元素的CSS类样式 var a=document.getElementById(a);a.style.color=color;设置了a的属性style中的color,结果该元素颜色变成红色。同理，我们可以设置元素style中的任何属性。,第三章 DOM文档对象模型,节点的引用练习题根据实例实现要求。在页面上动态添加文本框。动

15、态删除文本框。观看效果。,第三章 DOM文档对象模型,事件处理事件模型和传播机制事件模型：标准模型：有w3c组织制定，火狐等浏览器支持ie模型：有ie浏览器支持两种模型的区别1：Ie模型中，window对象提供了一个event属性来保存当前事件对象，所以可以象使用全局变量一样使用该属性。标准模型中，事件对象是一个局部变量，只在事件被触发时产生。,第三章 DOM文档对象模型,事件处理对区别的具体分析：Ie模型代码：window.onload=function()alert(window.event.type);标准模型代码：window.onload=function(e)alert(e.typ

16、e);显然，我们看出window.event并没有定义直接使用，当做全局变量使用e.type e变量，是我们在函数内部创建的，指向当前触发的事件。,第三章 DOM文档对象模型,事件处理区别2：传播机制的不同：标准模型的传播机制分为三个阶段：捕捉目标节点触发事件冒泡注意，捕捉和冒泡只会执行一个，默认情况是冒泡。,第三章 DOM文档对象模型,事件处理区别2：传播机制的不同：Ie模型的传播机制分为两个阶段：目标节点触发事件冒泡显然，ie没有捕捉阶段。下面，我们用代码来说明到底什么是捕捉，什么是冒泡。,第三章 DOM文档对象模型,事件处理-注册事件讲解捕捉和冒泡之前，必须先要学习如何注册事件1。我们可

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

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

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

20、捕捉的，所以我们使用火狐来演示什么是冒泡什么是捕捉。标准默认标准捕捉标准冒泡,第三章 DOM文档对象模型,事件处理练习题：实现鼠标滑过，背景色变化。如效果。,第三章 DOM文档对象模型,事件处理阻止冒泡：既然有冒泡这种情况，我们是否可以阻止冒泡呢？有这样的代码：function stopBubble(e)/阻止事件冒泡的通用方法 if(e,第三章 DOM文档对象模型,事件处理阻止冒泡的实际应用：题目：为页面上的所有标签添加onmouseover和onmouseout事件，当鼠标滑过 背景色变化，鼠标离开，背景色恢复。查看实际效果。,第三章 DOM文档对象模型,事件处理-注册事件通用注册事件由于

21、ie和标准两个模型的注册事件不同，就给我们带来了很多不便，于是，我们可以把两种注册事件混合成一个方法，该方法既能够在ie中使用也能在火狐中使用。混合后的代码如下：function addEvent(obj,name,handler,userCaputure)if(window.event)obj.attachEvent(on+name,handler);else obj.addEventListener(name,handler,userCaputure);,第三章 DOM文档对象模型,事件处理-注销事件既然有注册事件，自然会有注销事件注册有：addEventListener，attachEv

22、ent注销有：removeEventListener，detachEvent通用注销方法：function removeEvent(obj,name,handler,userCaputure)if(window.event)obj.detachEvent(on+name,handler);else obj.removeEventListener(name,handler,userCaputure);,第三章 DOM文档对象模型,事件处理-事件对象我们前面所见过的window.event 就是事件对象，那么该对象还有很多的属性和方法，下面我们来了解下。我们了解到ie和火狐的事件对象是不一样的，所以他们的属性和方法也不一样查看下表:,第三章 DOM文档对象模型,事件处理-事件对象那么这些属性和方法有什么用途呢？我们来举例说明：练习题1：一个文本框，一个按钮，当用户输入文本框，点击按钮，或者按下回车键的时候，弹出文本框的值。查看效果.,第三章 DOM文档对象模型,事件处理-事件对象练习题2：(要求只能给table添加事件)如效果。,第三章 DOM文档对象模型,事件处理-常用事件课本139页,第三章 DOM文档对象模型,事件相关练习练习题1：悬浮广告如效果,第三章 DOM文档对象模型,事件相关练习练习题2：可拖动层如效果,第三章 DOM文档对象模型,