《《JS常用文档对象》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《JS常用文档对象》PPT课件.ppt（70页珍藏版）》请在金锄头文库上搜索。
1、 JS常用文档对象制作：潘院明 HTML文档的树状结构根节点根节点根节点根节点的子节点的子节点有什么办法对有什么办法对HTML中的内容进行动态改变呢？中的内容进行动态改变呢？演示示例演示示例3 3：动态改变动态改变HTMLHTML中的内容中的内容使用使用Document Object Model相邻节点相邻节点 一、DOM DOMDocument Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。function changeLink() document.getElementById(myAnchor).innerHTML=
2、搜狐搜狐 ;document.getElementById(myAnchor).href=http:/ ; 淘宝淘宝修改内容修改内容修改属性修改属性HTML文档的每个节点都是对象，类似文档的每个节点都是对象，类似WinForm中的控件，都具备属性、方法和事件中的控件，都具备属性、方法和事件定位链接元定位链接元素（对象）素（对象） DOM对象模型-1http:/window 窗口对象窗口对象location地址对象地址对象FORM表单对象表单对象浏览器对象的分层结构浏览器对象的分层结构window.document.myform.text1 document文档对象文档对象 DOM对象模型-2浏
3、览器对象的分层结构浏览器对象的分层结构 二、document（文档）对象属性方法名称 说明bgColor设置或检索 Document 对象的背景色 名称 说明getElementByID( )根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象getElementsByName( )根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能) 制作浮动的广告图片-1如何在页面上方显示广告图片？如何控制图片的移动？如何在页面上方显示广告图片？如何控制图片的移动？使用使用DIV层，把图片放在层中，然后使用层，把图片放在层中，然后使用J
4、avaScript控制控制层的位置坐标层的位置坐标 制作浮动的广告图片-2实现思路：在页面中插入层，然后在层中插入图片编写脚本1 1、使用、使用getElementByID( )方法获取层对象方法获取层对象2 2、捕获鼠标滚动事件，改变层对象的位置坐标、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3常见的页面坐标的介绍top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度 制作浮动的广告图片-4 var advInitTop=0; function inix( ) advInitTop=docu
5、ment.getElementById(advLayer).style.pixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop; window.onscroll=move ; /当页面滚动时调用当页面滚动时调用move( )函数函数 查看完整代码查看完整代码获取层的初始与上获取层的初始与上边界的距离边界的距离通过页面滚动的通过页面滚动的高度来改变层距高度来改变层距离上边界的距离离上边界的距离 浏览器兼容性var scrollTo
6、p;if(typeof window.pageYOffset != undefined) scrollTop = window.pageYOffset;else if(typeof patMode != undefined & patMode != BackCompat) scrollTop = document.documentElement.scrollTop; else if(typeof document.body != undefined) scrollTop = document.body.scrollTop; 制作带关闭按钮的浮动窗口-1如何实现带关闭功能的浮动窗口？如何实现带关
7、闭功能的浮动窗口？把把带关闭的图标放到层中，当点击图标时层消失。带关闭的图标放到层中，当点击图标时层消失。 制作带关闭按钮的浮动窗口-2实现思路：在页面中插入层，在层中插入图片编写脚本1 1、使用使用getElementById( )方法方法获获得层对象得层对象2 2、设置层的样式、设置层的样式style的显示属性的显示属性display=none 制作带关闭按钮的浮动窗口-3var advInitTop=0;function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop; function move(
8、) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementById(advLayer).style.display=none; window.onscroll=move ; /当页面滚动时调用当页面滚动时调用move( )函数函数 查看完整代码查看完整代码隐藏关闭图标所在隐藏关闭图标所在的层
9、和浮动窗口所的层和浮动窗口所在的层在的层 制作带关闭按钮的浮动窗口-4上一张上一张PPT中示例能实现关闭了，但关闭图片不能跟随滚中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？动，怎么办？让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。滚动。解决办法：在解决办法：在move( )方法中添加图标所在的方法中添加图标所在的层与页面滚动的高度保持同步的代码即可层与页面滚动的高度保持同步的代码即可 制作带关闭按钮的浮动窗口-5 var advInitTop=0; var closeInitTop=0;function inix( )advI
10、nitTop=document.getElementById(advLayer).style.pixelTop;closeInitTop=document.getElementById(closeLayer).style.pixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop ; document.getElementById(closeLayer).style.pixelTop= closeInitTop+document.b
11、ody.scrollTop ; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementById(advLayer).style.display=none; window.onscroll=move ; /窗口的滚动事件窗口的滚动事件查看完整代码关闭图片所在的关闭图片所在的层和滚动条同步层和滚动条同步滚动滚动 小结 1制作右边栏浮动的带关闭按钮的广告图片与滚动与滚动条同步条同步滚动广滚动广告窗口告窗口练习答案练习答案练习代码练习代码 制作实现全选效果-1如何实现
12、如图所示的全选或全不选效果？如何实现如图所示的全选或全不选效果？全选全选效果效果全不选全不选效果效果 制作实现全选效果-21、复选框是否选中的属性是哪个？2、写代码逐个复选框设置为true，有没有更好的办法？checked属性属性解决办法解决办法: 使用复选框数组，使用复选框数组，通过循环给通过循环给checked属性赋值属性赋值 制作实现全选效果-3实现思路：创建一组同名的复选框编写脚本1、使用使用getElementsByName( )方法获得一组同名的复选框对象。方法获得一组同名的复选框对象。2、通过循环来改变复选框是否被选中属性、通过循环来改变复选框是否被选中属性checked的值。的
13、值。 制作实现全选效果-4function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 全选全选 全不选全不选 查看完整代码查看完整代码判断同名元素中是判断同名元素中是否是复选框否是复选框是复选框就改变是复选框就改变是否选中属性是否选中属性checked的值的值 小结 2编写如左图所示
14、，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。练习答案练习答案练习代码练习代码 常见错误-1 function checkAll(boolValue ) alert(OK); var allCheckBoxs=document.getElementsByName(isBuy) ; alert(allCheckBoxs0.type); for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 这里是判断关系所以应该这里是判断关系所
15、以应该是比较运算符是比较运算符=，而不，而不是赋值运算符是赋值运算符= function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 全选全选 全不选全不选 常见错误-2调用时调用时，参数，参数不要加不要加单引号，单引号，false和和false的含义不一的含义不一样样 小结请介绍Do
16、cument对象的常用属性？请详细解释Document对象的常用方法？请简述制作带关闭按钮的浮动窗口实现思路？请简要回答如何制作全选/全不选复选框效果？ 为什么需要表单验证服务器IE脚本在客户端执行，减轻服务器端的压力脚本在客户端执行，减轻服务器端的压力客户端客户端用户输入用户输入客户端客户端用户输入用户输入客户端客户端用户输入用户输入发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应 三、表单（form）对象表单对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以JS脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。在页面中
17、定义表单后，通常需要使用JS语言验证表单数据，在JS中验证表单数据需要使用表单对象的属性、方法和事件。JS的最大优点在于可以处理页面中的表单，可以在表单数据提交服务器之前，对用户输入的数据进行有效的检查。如不符合规则，则弹出错误提示对话框，告知用户错误信息。（验证工作在客户端完成，降低系统的复杂性，提高页面加载速度）一个document对象可以包含多个form对象document.forms数组： document.formsi一个 form对象可以包含多个element对象（表单元素）formName.elements数组： formName.elementsi 表单（form）对象当用户在
18、网页中添加标签后，就创建一个form对象表单对象属性document.forms.length：网页中表单的个数document.formsi.elementsj.name：表单中的元素名称表单对象方法submit()：提交一个表单reset()：清除一个表单的数据，不需要使用重置按钮也可重置表单这两个方法等同于提交/重置按钮，当表单使用这两个方法时，不会触发onSubmit/onReset事件eg: document.forms0.submit();可以在普通按钮上使用onClick事件处理表单提交或表单重置 表单（form）对象表单提交的常见问题用户多次提交，将会引起创建多次用户请求的错误
19、解决方法：在表单提交后将表单提交按钮设置为禁用document.myform.subButton.disabled=true;document.myform.submin();表单对象事件onSubmit事件：提交表单（单击提交按钮时触发）onReset事件：重置表单（单击重置按钮时触发） 表单验证的内容-1不能为空且不能为空且不能有数字不能有数字不能为空且不能为空且不能有数字不能有数字不能为空，且只不能为空，且只能包括字母、数能包括字母、数字和下划线字符字和下划线字符密码不能为空并且最密码不能为空并且最少为少为6位，还要求两位，还要求两次输入的密码要一致次输入的密码要一致 表单验证的内容-2
20、不能为空且包含不能为空且包含字符字符和和.只能二选一只能二选一年月日不能年月日不能为空，且不为空，且不能超出其要能超出其要求的范围求的范围 表单验证的思路-1 如何编写脚本验证表单？1、获取表单元素的值（、获取表单元素的值（String类型），然后进行判断类型），然后进行判断2、触发触发表单表单（FORM）的提交事件的提交事件（onSubmit） 表单验证的思路-2常用的String对象使用 var 语句 var newstr = 这是我的字符串创建 String 对象 var newstr = new String(这是我的字符串“)调用方法和属性 字符串对象.属性名 字符串对象.方法名(
21、) 表单验证的思路-3名 称说 明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2 )求子串toLowerCase( )将字符串转换成小写 toUpperCase( )将字符串转换成大写 String对象常用的属性和方法语法：语法：indexOf(“查找的子字符串查找的子字符串”，查找的起始位置，查找的起始位置)返回子字符串所在的位置；如果没找到，返回返回子字符串所在的位置；如果没找到，返回 1例如：例如：var xvar y=“abcdefg”
22、;x=y.indexOf(“c” , 0 ); /返回结果为返回结果为2，起始位置是，起始位置是0 表单验证的思路-4查看完整代码查看完整代码检查电子邮件检查电子邮件email是否包含是否包含“”和和”.” function checkEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=0) alert(电子邮件不能为空电子邮件不能为空!); return false; if (strEmail.indexOf(,0)=-1) alert(电子邮件格式不正确电子邮件格式不正确n必须包含必须包含符号！
23、符号！); return false; if (strEmail.indexOf(.,0)=-1) alert(电子邮件格式不正确电子邮件格式不正确n必须包含必须包含.符号！符号！); return false; return true; 返回结果返回结果-1表示表示没找到没找到“”字符字符获取表单元素的值获取表单元素的值表单的提交事件表单的提交事件 表单验证的思路-5-1查看完整代码查看完整代码 表单验证的思路-5-2查看完整代码查看完整代码function checkUserName() /验证用户名验证用户名 var fname = document.myform.txtUser.val
24、ue; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含数字名字中包含数字 n+请删除名字中的数字和特殊字符请删除名字中的数字和特殊字符); return false else alert(请输入请输入“名字名字”文本框文本框); document.myform.txtUser.focus(); return false return true; 验证用户名不验证用户名不能包含数字能包含数字获取表单元素的值获取表单元素的值 表单验
25、证的思路-5-3查看完整代码查看完整代码 function passCheck() /验证密码验证密码var userpass = document.myform.txtPassword.value;if(userpass = )alert(未输入密码未输入密码 n + 请输入密码请输入密码);document.myform.txtPassword.focus();return false; if(userpass.length 6)alert(密码必须多于或等于密码必须多于或等于 6 个字符。个字符。n);return false; return true; 验证密码不少于验证密码不少于6位
26、位获取表单元素的值获取表单元素的值 表单验证的思路-5-4查看完整代码查看完整代码 function validateform() if(checkUserName()&passCheck( ) return true; else return false; 同时调用验证用户同时调用验证用户名和验证密码方法名和验证密码方法表单的提交事件表单的提交事件触发表单提交事件触发表单提交事件 小结 1编写如下图所示，实现登录表单的验证功能练习代码练习代码练习答案练习答案 文本框控件-1如何实现如下图所示，完善电子邮件的例子。用户单击时用户单击时,邮邮箱的提示信息箱的提示信息自动清除自动清除提示电子邮提示
27、电子邮件格式不对件格式不对输入的信息输入的信息自动被选中自动被选中并高亮显示并高亮显示 文本框控件-2文本框对象的常用属性、方法、事件使用文本框对象的相关方法，实现选中效果使用文本框对象的相关方法，实现选中效果名 称说 明属性value设置或获取文本框的值方法focus( )获得焦点select( )选中文本内容，突出显示输入区域事件onFocus光标进入某个文本框脚本运行onBlur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件 一次性完成验证 一个个完成验证用户名：光标进入文本框时，修改其内容用户验证用户名： function update(o) o.valu
28、e=; o.style.color=red; function checkname(o) var a=document.getElementById(aa); var name=o.value; a.innerHTML=; / alert(a.innerHTML); if (name.length=6) a.innerHTML=用户名必须6个以上字符; This is my JSP page. 用户名： 文本框控件-3查看完整代码查看完整代码 . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将请输
29、入真实的电子邮箱，我们将 发送激活密码发送激活密码) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填必填清空文本框的内容清空文本框的内容修改文本框的颜色修改文本框的颜色文本框获得焦点就调文本框获得焦点就调用方法用方法clearText( ) 小结 2编写如下图所示，实现注册表单的验证功能练习代码练习代码练习答案练习答案每个文本每个文本框非空框非空密码和再次输入密码和再次输入的密码必须相同的密码必须相同年份必须年份必须是是20打头打头日期必须在日期必须在1到到31之间之间 常见错误-1
30、function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按钮提交按钮type=submit清空按钮清空按钮type=reset 常见错误-2function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; onsubmit不是提不是提交按钮的事件交按钮的事件 小结为什么需要表单验证？常用的表单验证主要包括哪些内容？简述表单验
31、证的大致思路？简要说明文本框对象的常用属性、方法和事件？表单验证中常见的错误有哪些？ 四、锚点与链接对象1、锚点对象（anchor）JS中的锚点对象是文档对象的一个属性，通常以数组的形式表示网页中所有的锚点。anchors数组中包含了文档中定义的所有的锚点（.）标记，可以通过该数组访问和查找某个锚点anchors数组中存储锚点的顺序是以锚点在文档中出现的顺序存储的，下标从0开始anchors数组常用属性doucment.anchors.length：文档中锚点的总数doucment.anchorsi.name：某个锚点的name参数值doucment.anchorsi.id：某个锚点的id参数
32、值锚点操作锚点定义：锚点定义锚点链接/跳转：锚点链接 链接对象链接对象是文档对象的一个属性，每个链接对象都存储在links数组中链接对象是以在页面中出现的顺序存储在links数组中的链接对象的常用属性href：完整的链接URL（如http:/ :链接URL中的主机名（）port :链接URL中的端口号（80）protocol：链接URL中的协议部分并包括冒号（http:）pathname：链接URL中的路径名部分（mr.html）search：链接URL中的条件部分并包括“？”符号（如?s=10）target：链接的目标窗口打开方式_parent：表示在上一级窗口中打开（常在框架中使用）_bl
33、ank：表示在新窗口中打开 _self：表示在同一窗口中打开 _top：表示在浏览器的整个窗口中打开，忽略任何框架 五、图像（image)对象HTML中以创建一个图像，相应的图像对象将被创建，可以使用JS控件图像对象doucment.images数组包含了页面中所有的图像对象表示某个图像：doucment.imagesi doucment.imagesimageName （imageName为中的name属性值）function setPictrue()/用户选择一个图像后马上显示该图像var pic=document.form1.f.value;document.imagespimg.src
34、=pic;上传图片： 如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？页面效果页面效果使用图片的单击事件。使用图片的单击事件。onClick=checkForm( ) 如何使用图片代替提交按钮根据上述分析和提供的素材页面来实现表单验证。根据上述分析和提供的素材页面来实现表单验证。素材页面素材页面 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用户名不能为空！用户名不能为空！);
35、 document.myform.txtUserName.focus( ); 检验是否为空检验是否为空单击事件，调用表单击事件，调用表单验证函数单验证函数 如何使用图片代替提交按钮能进行表单验证，但即使是正确填写了表单，也能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击不能提交页面（点击“注册注册”没反映）。没反映）。 如何使用图片代替提交按钮因为图片不具备因为图片不具备“提交提交”按钮的提交功能，所以需按钮的提交功能，所以需要人工调用提交方法要人工调用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUs
36、erName.value.length=0) alert(用户名不能为空！用户名不能为空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 查看源代码查看源代码如果表单输入合法，则提交表单如果表单输入合法，则提交表单 改变图像的透明度图像对象的事件onLoad、onClick、onMouseOver、onMouseOut等如：鼠标进入/离开图像时，透明度的变化function visible(cursor,i)if(i=0) cursor.filters.alpha.opacity=100;else
37、cursor.filters.alpha.opacity=45; 补充特效即时提示错误内容动态改变的层 制作即时提示错误的特效如何制作即时提示错误的特效？如何制作即时提示错误的特效？页面效果页面效果 制作即时提示错误的特效使用使用DIV层的内容动态改变。层的内容动态改变。 在每个输入框后添加一个在每个输入框后添加一个DIV层层, 根据用户的输入根据用户的输入, 动态显示错误信息动态显示错误信息 制作即时提示错误的特效演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError （即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码
38、，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例4 4：演示素材演示素材 制作即时提示错误的特效演示实现步骤：演示实现步骤：3、添加文本框失去焦点的事件函数、添加文本框失去焦点的事件函数： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用户
39、名不能为空用户名不能为空; return; 查看源代码查看源代码如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV的的innerHTML或或innerText进行错误进行错误提示，提示，innerText只能写文本信息只能写文本信息获取插入的获取插入的DIV对象对象 小结2完善完善”密码密码“和和”电子邮件电子邮件“的错误提示功能。的错误提示功能。提示：提示：1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数
40、练习答案练习答案 练习素材练习素材 制作内容动态改变的层特效如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)？页面效果页面效果 制作内容动态改变的层特效方法1： 当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”；方法2： 当动态显示的内容较多，并相对固定时，则预先制作好DIV内容， 然后使用 myDiv.style.display=“none/block”；有哪些方法可以实现动态改变页面内容？有哪些方法可以实现动态改变页面内容？ 制作内容动态改变的层特效演示实现步骤：演示实现步骤：1、预先插入两个、预先插入两个DIV标签
41、，分别放置不同计算方式标签，分别放置不同计算方式显示的内容：显示的内容：DIV1按面积计算按面积计算显示的内容显示的内容DIV2按贷款总额计按贷款总额计算显示的内容算显示的内容演示素材演示素材 function InitDIV( )document.getElementById(DIV1).style.display=none; 制作内容动态改变的层特效演示实现步骤：演示实现步骤：2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算：隐藏隐藏DIV1页面加载时调用页面加载时调用查看源代码查看源代码 function displayDIV( ) i
42、f (document.myform. methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; 制作内容动态改变的层特效3、添加函数，根据、添加函数，根据“计算方式计算方式”的选择，隐藏的选择，隐藏/显示对应显示对应DIV层：层：查看源代码查看源代码根据单选按钮的值，根据单选按钮的值，隐藏隐藏/显示对应的层显示对应的层按钮的单击事件按钮的单击事件 function showDiv() var d=document.getElementById(div3); d.style.display=block; function shownotDiv() var d=document.getElementById(div3); d.style.display=none; 个人信息管理个人信息管理 查看个人信息查看个人信息 修改密码修改密码 修改个人信息修改个人信息
