第三章：javascript-DOM对象模型-补充课件.ppt

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