第四讲DOM对象和事件

Java基础课程主讲教师:李铮上一几次课我们介绍了JS的基本语法，本节课我们介绍JS的核心,DOM和事件。第四讲DOM和事件4.1DOM4.2事件4.3练习[知识目标]理解DOM的概念和主要方法。理解事件的概念。[能力目标]会利用事件和DOM建立简单的程序。4.1DOM4.1.1、DOM概述一、相关概念1、方法:函数的另一种称呼，主要用于对象。2、对象:包含一些属性及方法的数据集合。属性1=值1;属性2=值2;…方法1=方法;…3、文档:一个HTML文件是一个文档。4、文档对象:文档中的一个元素。如文本,图片,链接等都叫做文档对象,有多种文档对象。5、DOM(DOCUMENT):文档对象自身的一组方法，它定义了如何去访问和修改一个文档对象。HTML文档A文档对象DOM二、DOM形成1、浏览器加载HTML并生成DOM树过程(1)读取HTML内容。(2)按照从外向内的顺序，依次加载所有的文档对象,并为每一个文档对象附加方法和属性。(3)以document为根把所有文档对象连接成一棵树。htmlheadtitleMyTitle/title/headbodyahref=“#”MyLink/ah1MyText/h1/body/html2、生成文档对象类型DOM常用文档对象有三种类型(1)ELEMENT(元素):代表所有标志。(2)TEXT(文本):代表标志内容。(3)ATTR(属性):代表标志属性。不同的文档对象提供不同的方法。4.1.2文档对象使用一、document对象1、概念代表了dom的根对象，通过document可以访问所有文档对象。2、主要属性(1)links链接数组，保存了文档中所有的链接。(2)forms表单数组，保存了文档中所有的表单。(3)images图片数组，保存了网页中所有的图片。例4.1.2.1,读取文档所有链接的内容。varlinks=document.links;for(vari=0;ilinks.length;i++){varobj=links[i];document.write(obj.innerHTML+br/);}例4.1.2.2,利用images读取所有图片的宽高，并修改为统一大小functionimages(height,width){varis=document.images;for(vari=0;iis.length;i++){varobj=is[i];document.write(obj.height+:+obj.width+br/);obj.height=height;obj.width=width;}}例4.1.2.3,利用forms属性读取表单的action属性functionforms(){varfs=document.forms;for(vari=0;ifs.length;i++){varobj=fs[i];document.write(action:+obj.action+br/);}}(3)命名标签便于访问1)原因数组访问麻烦且容易出错，如访问第一个表单,用document.form[0],如form改变顺序则返回值改变。2)使用在标签中加入name属性,并给予一个值。3)利用名字访问document.forms[“名字”]。或document.名字.内部带名字的标志…。例4.1.2.4,利用forms名字属性读取表单的数据functiongetformValue(){varuser_name=document.f1.user_name.value;varuser_pass=document.f1.user_pass.value;alert(user_name:+user_name);alert(user_pass:+user_pass);}3、document主要方法(1)getElementsByTagName根据标志名返回所有标志。1)使用document.getElementsByTagName(“标志”);2)返回值返回相应的标志数组。例4.1.2.5,利用getElementsByTagName取得所有链接中的值,当大于10字符时截断functiongetLinkValue(){vara=document.getElementsByTagName(a);for(vari=0;ia.length;i++){varobj=a[i];document.write(obj.innerHTML+br/);obj.innerHTML=obj.innerHTML.substring(0,10)+...;}}(2)getElementsByName根据name值返回对象数组。1)使用document.getElementsByName(“名字”)2)返回值返回一个具有相同name值的对象的数组例4.1.2.6,利用getElementsByName取得链接中的值,当大于10字符时截断。functiongetLinkValue(name){vara=document.getElementsByName(name);for(vari=0;ia.length;i++){varobj=a[i];document.write(obj.innerHTML+br/);obj.innerHTML=obj.innerHTML.substring(0,10)+...;}}(3)getElementById根据ID值返回对象1)使用document.getElementById(“id值”);2)返回值返回一个文档对象。例4.1.2.7,利用getElementsById取得标志并设置其内容。functiongetEById(id,content){vare=document.getElementById(id);e.innerHTML=content;}二、文档对象利用document对象方法返回的对象。1、属性(1)innerHTML返回文档对象内的HTML。1)使用对象.innerHTML对象.innerHTML=“html代码”;(2)样式属性1)使用对象.style.样式属性对象.style.样式属性=值具体样式属性见文档。2)注意style一定要用标志的style属性设置，用CSS无效。例4.1.2.8,利用style设置任意id标志的大小functionsetFontSize(id,font_size){vare=document.getElementById(id);e.style.fontSize=font_size;}(3)其他属性见文档对象标志1)使用对象.属性对象.属性=值例4.1.2.9,利用p属性设置p的居中方式functionsetAlign(id,align){vare=document.getElementById(id);e.align=align;}4.2事件4.2.1事件概述1、事件概念当文档或它的某些元素发生了某些事情时，WEB浏览器就会生成一个事件。例如:按某个按键，点击鼠标等。2、事件产生及处理过程(1)为某个文档对象的某个事件安排特定处理函数。(2)浏览器拦截特定事件(3)浏览器调用处理函数(如果有).按钮处理函数注册调用点击3、主要事件类型及触发时机名称触发支持onblur元素失去焦点button,input等onclick点击大多数ondbclick双击大多数onload文档全部加载body4.2.2连接事件与处理函数1、利用HTML事件属性进行连接标志事件=“处理函数”/缺点在于程序和html的融合。例4.2.2.1,利用HTML属性链接事件点击:inputtype=textonclick=value='点击了这个对象!!';onblur=value='离开了这个对象!!';/2、利用DOM事件属性。dom.事件属性=函数名;注意，这里函数不要加()。例4.2.2.2,利用JS属性链接事件点击:inputid=itype=text/functioninit(){varinput=document.getElementById(i);input.onclick=c;}functionc(){varinput=document.getElementById(i);alert(点击);}总案例:设计一个网页程序,可以初始化所有的p的文字大小，并且在点击”sub”链接时减少所有的p的文字大小，点击”add”时增加所有p的文字大小。课上作业:建立一个程序，界面由两个输入框和一个按钮组成，当单击按钮时显示两个输入框值的和。课下项目(需要设计思路和结果):1、建立通用表格变色函数，函数形式如下changeColor(id,颜色1,颜色2),只要输入表格id,则把单数背景色转为颜色1,双数行转为颜色2(30分)。提示:1、文档对象的getElementsByTagName。2、建立一个通用表单验证函数，不论有多少表单控件，只要输入表单的id，当点击表单的提交按钮时，会检测所有的表单text和password控件，只要为空则发出提示,如”用户名控件不能为空”，并焦点停在内容为空的控件，检测完所有控件再提交表单(40分)。提示:1、文档对象的elemens属性。2、文档对象的type属性。3、文档对象focus方法。4、form的submit方法。5、提示信息可以写在控件的title上。3、扩展项目建立一个层，当点击这个层时，层里会出现一个文本框，文本框的内容就是层的文本，而当层失去焦点时，文本框消失并变回层(30分)。点击前点击后提示:1、事件里的this。2、js匿名函数的使用。3、DOM节点操作。参考书籍:《JavaScript权威指南，第五版》15章和17章。《JavaScript语言精粹》需要软件FireFox+FireBugUltraEdit。再见.