《第三章javascriptDOM对象模型补充课件》由会员分享，可在线阅读，更多相关《第三章javascriptDOM对象模型补充课件（31页珍藏版）》请在金锄头文库上搜索。
1、JavaScriptDOMJavaScriptDOM对象模型对象模型第三章第三章第三章第三章- - - -扩扩展展展展回顾与作业点评document对象提供了哪三种访问对象提供了哪三种访问DOM元素的元素的方法？方法？使用什么样式属性控制元素的隐藏使用什么样式属性控制元素的隐藏/显示显示？如何动态的改变一个标签的值？如何动态的改变一个标签的值？预习检查根据你的理解，什么是根据你的理解，什么是DOM？W3C标准定义的标准定义的DOM由哪三部分组成？由哪三部分组成？标准节点操作包括哪些操作？标准节点操作包括哪些操作？预习检查如何编写如何编写JavaScript脚本程序？脚本程序？JavaScrip
2、t与与Java基本语法的异同？基本语法的异同？任务-实现企业网站轮播图需求说明需求说明根据给定图片，实现轮播展示。根据给定图片，实现轮播展示。6任务分解每一次只显示一张图片每一次只显示一张图片每隔一个时间切换另外一张每隔一个时间切换另外一张轮播完所有图片，再重新开始轮播完所有图片，再重新开始设置链接文本，跟随图片轮播设置链接文本，跟随图片轮播鼠标经过时，轮播停止，移开自动轮播鼠标经过时，轮播停止，移开自动轮播任务目标掌握掌握document对象模型用法对象模型用法了解了解DOM树模型树模型学会学会document查找查找html标签标签学会学会document改变改变html标签的内容标签的内
3、容学会学会document改变改变html标签样式标签样式掌握事件处理掌握事件处理掌握时间函数的用法掌握时间函数的用法DOM模型的相关概念模型的相关概念什么是什么是DOM？文档对象模型（文档对象模型（Document Object Model）通过通过DOM可以动态改变文档内容可以动态改变文档内容动态改变文档内容的原理动态改变文档内容的原理1、解析文档（如、解析文档（如HTML）并生成）并生成DOM树树2、通过、通过DOM标准接口标准接口+编程语言改变文档内容编程语言改变文档内容DOM模型的相关概念模型的相关概念解析文档生成解析文档生成DOM树的过程树的过程DOM节点节点 喜欢的水果喜欢的水果
4、 DOM应用应用生成的生成的DOM树结构是树结构是什么？什么？DOM模型的相关概念模型的相关概念DOM树中的节点类型和节点关系树中的节点类型和节点关系文档节点文档节点document元素节点元素节点文本文本节点节点.属性属性节点节点父子父子关系关系同级同级关系关系DOM模型的相关概念模型的相关概念W3C规定的三类规定的三类DOM标准接口标准接口Core DOM（核心（核心DOM），适用于各种结构化文档），适用于各种结构化文档XML DOM（Java OOP），专用于），专用于XML文档文档HTML DOM，专用于，专用于HTML文档文档选用选用DOM标准接口，标准接口，结合支持的编程语言访结合
5、支持的编程语言访问问DOM树，如树，如Java、JavaScript、C#等等12常用DOM操作接口Core DOM接口接口访问页面节点访问页面节点HTML DOM接口接口获取属性的方法获取属性的方法Core DOM的操作的操作查看节点查看节点获取页面标签获取页面标签getElementById( ) ：通过：通过id访问访问getElementsByName( ) ：通过：通过name名称访问，集名称访问，集合数组。合数组。getElementsByTagName( ) ：通过标签名访问，集合：通过标签名访问，集合数组。数组。改变标签内容的方法innerHTML和和innerText区别：区
6、别：innerHTML可以解析可以解析html标签标签，如：如： document.getElementById(clock).innerHTML=时间时间;表示以表示以h1标签显示标签显示“时间时间”文本文本innerText纯文本纯文本，如：如： document.getElementById(clock).innerText=时间时间;显示显示时间时间文本文本HTML DOM的特有对象和操作的特有对象和操作什么是什么是HTML DOM对象对象 HTML文档中的每个节点都是文档中的每个节点都是DOM对象，每类对象都有对象，每类对象都有1套套属性、方法。属性、方法。最常用的是最常用的是表格和
7、各表格和各类表单类表单元素对象元素对象HTML DOM接口改变标签属性改变标签属性先找到该标签，直接通过先找到该标签，直接通过.方式找到属性，再修改，方式找到属性，再修改，如：如：var pic1=document.getElementById(pic);pic1.src=images/apple.jpg;HTML DOM的特有对象和操作的特有对象和操作HTML DOM对象对象 的属性访问的属性访问function change() var imgs=document.getElementById(s1); imgs.src=images/apple.jpg;function show() v
8、ar hText=document.getElementById(s1).alt; alert(图片的图片的alt是：是：+hText)HTML DOM接口改变标签样式改变标签样式Style属性可以改变标签样式，如：属性可以改变标签样式，如：var pic1=document.getElementById(pic);pic1.style.color=red;还可以修改标签的类选择器名称还可以修改标签的类选择器名称document.getElementById(t1).className=test;任务分析：轮播图不断改变img标签的src属性就可以实现不断显示不同的图片还可以有其他方式实现：例
9、如某一时刻显示一张图片，其他图片隐藏元素的显示和隐藏如何实现如图所示的页面效果？如何实现如图所示的页面效果？页面中图片、层等元素的显示和隐藏页面中图片、层等元素的显示和隐藏visibilityvisibility属性的值属性的值值描述描述visible表示元素是可表示元素是可见的的hidden表示元素是不可表示元素是不可见的的object.style.visibility=值值displaydisplay属性的值属性的值值描述描述none表示此元素不会被表示此元素不会被显示示block表示此元素将表示此元素将显示示为块级元素，此元素前元素，此元素前后会后会带有有换行符行符object.styl
10、e.display=值值事件响应事件事件事件是指浏览器中发生的事，比如页面加载，用户事件是指浏览器中发生的事，比如页面加载，用户单击按钮，鼠标移动等。单击按钮，鼠标移动等。脚本程序可以检测到浏览器中发生的事（即事件），脚本程序可以检测到浏览器中发生的事（即事件），并作出反应。并作出反应。常用事件：常用事件：加载加载:onload单击：单击：onclick内容改变：内容改变：onchange获得焦点：获得焦点：onfocus鼠标经过：鼠标经过：onmouseover鼠标移开：鼠标移开：onmouseout定时函数setTimeout()用法用法setTimeout（“调用的函数调用的函数”, “
11、指定的时间后指定的时间后）setInterval()方法方法setInterval（调用的函数调用的函数, 指定的时间间隔指定的时间间隔）clearInterval(mytime):清除时间函数清除时间函数var myTimesetTimeout(disptime( ) , 1000 );var myTimesetInterval(disptime( ) , 1000 );setTimeout()只只执行行disptime()一次，如果要多次一次，如果要多次调用使用用使用setInterval()者者者者让disptime()自身再次自身再次调用用setTimeout()每隔每隔1秒秒(100
12、0毫秒毫秒)执执行函数行函数disptime()一次一次时钟显示特效时钟显示特效完成任务任务分析任务分析图片在页面加载时，每隔某个时间改变图片图片在页面加载时，每隔某个时间改变图片鼠标经过数字上面时，停止播放图片（即时间函数鼠标经过数字上面时，停止播放图片（即时间函数停止）停止）鼠标移开时，再重新播放（即重新开始时间函数调鼠标移开时，再重新播放（即重新开始时间函数调用）用）结构找到文件中找到文件中banner的的div,写入下列代码：写入下列代码： 1 2 设定样式#banner width: 1000px;height:300px;margin: 0 auto;position:relati
13、ve;#pic_list lilist-style:none;position:absolute;top:250px; left:500px;#pic_list li adisplay:block; height:20px; width:20px; text-decoration:none; color:#FFF; background-color:#CCC; line-height:20px; text-align:center; border:dotted 1px #FFFFFF;float:left;#pic_list li a:hover background-color:#F63;#
14、pic_list a#num1background-color:#F63;添加脚本var count=0; /定义计数器，图片显示的序号定义计数器，图片显示的序号var mytime; /时间变量时间变量/根据参数根据参数id判断，是响应鼠标经过事件还是时间事件判断，是响应鼠标经过事件还是时间事件function showImg(id)count+;/如果如果id变量有值，响应鼠标经过事件，停止轮播变量有值，响应鼠标经过事件，停止轮播(清除时间函数清除时间函数)，且使图片显示指定的，且使图片显示指定的idif(id0)clearInterval(mytime); /清除时间函数清除时间函数co
15、unt=id; /传递的计数器为指定的序号传递的计数器为指定的序号 if(count2) /这里只有两张图片，当序号为这里只有两张图片，当序号为2时，重新设置计数时，重新设置计数器为器为1显示显示count=1; /动态改变动态改变img属性值，图片放置在属性值，图片放置在images目录下，命名为目录下，命名为ad_1.jpg和和ad_2.jpgdocument.getElementById(pic).src=images/ad_+count+.jpg;/动态改变序号的样式，显示那张图片，这相应的序号显示为动态改变序号的样式，显示那张图片，这相应的序号显示为#F63色，不显示的色，不显示的图
16、片序号显示为灰色图片序号显示为灰色for(var i=1;i=2;i+)if(i=count)document.getElementById(num+i).style.backgroundColor=#F63;elsedocument.getElementById(num+i).style.backgroundColor=#CCC;/鼠标移开后调用该函数鼠标移开后调用该函数/启动时间函数，每间隔启动时间函数，每间隔1000毫秒，自动调用函数毫秒，自动调用函数showImg(0)function showOut()mytime=setInterval(showImg(0),1000);/时间函数，每间隔时间函数，每间隔1000毫秒，自动调用函数毫秒，自动调用函数showImg(0)mytime=setInterval(showImg(0),2000);总结Js-DOM结构结构DOM-core和和html接口接口事件处理事件处理定时函数定时函数
