第5章 DOM编程 张孝祥《JavaScript网页开发》.doc
《第5章 DOM编程 张孝祥《JavaScript网页开发》.doc》由会员分享,可在线阅读,更多相关《第5章 DOM编程 张孝祥《JavaScript网页开发》.doc(8页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第5章 DOM编程 张孝祥JavaScript网页开发.txt假如有一天你想哭打电话给我不能保证逗你笑但我能陪着你一起哭。坚强的基本,就是微笑。面具戴久了丶就成了皮肤5.1 DOM、DHTML介绍DOM (Document Object Model)DHTML (Dynamic HTML)JavaScript可以使用3种方式将HTML对象事件与处理程序代码进行关联:1) 在事件源对象对应的HTML标签上增加要处理的事件属性,例如 oncontextmenu=myFun()2) 直接在JavaScript代码中设置元素对象的事件属性,例如 document.oncontextmenu = myF
2、un;3) 在一个专门的标签对中编写事件处理代码,例如 5.2 window对象(引用window对象的属性和方法时,可以省略window这个前缀)方法: alert 具有OK按钮的提示对话框 confirm 具有OK、Cancel按钮的对话框 prompt 输入信息的对话框,例如 prompt(提示信息, 默认值) close 关闭窗口(如果是open方式打开的子窗口,则关闭;如果是用户Get方式打开的,则提示是否关闭) navigate 导航到指定URL setInterval 设置浏览器每隔时间(单位:毫秒)调用指定代码,例如 setInterval(myFun(), 5000) set
3、Timeout 设置浏览器经过时间(单位:毫秒)执行指定代码,例如 setTimeout(myFun(), 5000) clearInterval 取消setInterval clearTimeout 取消setTimeout moveTo 移动窗口位置(有的浏览器不理睬) resizeTo 改变窗口大小 open 打开一个新窗口,例如 window.open(url.html, _blank, top=0,left=0,width=200,height=200,toolbar=no); showModalDialog 产生模式对话框窗口(不能改变窗口大小,没有菜单、工具条、状态栏等) sho
4、wModelessDialog 产生非模式对话框窗口属性: closed 返回对应窗口是否关闭(一般用于检测子窗口,open返回值为子窗口window对象) opener 返回父窗口(打开本窗口的window对象) defaultstatus 设置/返回状态栏默认显示文本内容 status 设置/返回状态栏当前文本内容 screenTop 返回窗口左上角顶点在屏幕垂直位置 screenLeft 返回窗口左上角顶点在屏幕水平位置事件:(window对象事件处理器需要作为标签的事件属性设置) onload 装载完网页文档时。该属性还可用于、等,程序应放在对应标签之前 onunload 卸载网页文档
5、之后 onbeforeunload 准备卸载网页文档之前。 可在此处设置 window.event.returnValue=某字符串,浏览器将弹出一个对话框提示用户是否真的要关闭、离开网页。 通用事件:(大多数HTML元素都能触发的事件) onclick 单击 onmousemove 鼠标移动 onmouseover 鼠标移入 onmouseout 鼠标移出 onmousedown 鼠标按键按下 onmouseup 鼠标按键弹起 onkeydown 键盘按键按下 onkeyup 键盘按键弹起 onkeypress 键盘击键(按下后弹起)对象属性: 1) location对象:设置/返回当前网页
6、URL信息 href属性:可使用window.location.href=url;载入新文档,与window.navigate(url);作业一样 replace方法:也可用于载入新网页 reload方法:重新载入(刷新)当前网页,例如 opener.location.reload(); 2) event对象:设置/返回当前事件有关信息 altKey属性:事件发生时Alt键是否被按下 ctrlKey属性:事件发生时Ctrl键是否被按下 shiftKey属性:事件发生时Shift键是否被按下 clientX、clientY属性:设置/返回鼠标相对窗口客户区顶点x、y坐标 screenX、scre
7、enY属性:设置/返回鼠标相对屏幕顶点x、y坐标 offsetX、offsetY属性:设置/返回鼠标相对事件源顶点x、y坐标 x、y属性:设置/返回鼠标相对事件源的父元素顶点x、y坐标 returnValue:设置/返回事件的返回值 cancelBubble:设置/返回当前事件是否继续向下传递 srcElement:设置/返回事件源对象 keyCode:设置/返回键盘按下/弹起时那个按键的Unicode码 button:检索鼠标按键情况:1代表左键,2代表右键,3代表左右同时按下 注:HTML元素对象的tagName属性值中每个字母都是大写,例如 window.event.srcElement
8、.tagName=IMG,若用小写判断则必不等, 但可转换为小写再判断,例如 window.event.srcElement.tagName.toLowerCase()=img 3) frames数组:它与window对象的parent、top等对象属性,都是用于HTML的或进行编程的JavaScript对象 parent属性:父窗口 top属性:最顶层的窗口 用法举例:window.parent.frames1.location parent.frame.bottom.location parent.framesbottom.location parent.frames.item(1) pa
9、rent.frames.item(bottom) parent.bottom.location parentbottom top.frame_a.document.write(.) 4) screen对象:提供显示器分辨率、色彩度等信息 5) clipboardData对象:读写剪贴板内容 6) history对象:重新装载浏览器曾经访问过的URL列表的某个URL的方法 7) navigator对象:提供浏览器名称、版本号、所用操作系统、CPU类型、浏览器的国家语言等属性信息 8) document对象:代表整个网页文档5.3 document对象方法: write 向HTML文档动态写入内容
10、,会覆盖之前完整写入(完全解析HTML文档或调用close方法)的内容 writeln 与write方法类似,多加一换行符 open 打开新文档,与window.open方法类似,建议使用后者 close 写完内容后,一定调用该方法关闭文档流 clear 清除文档所有内容,目前未得到完全支持,可用document.close();document.write();document.close();代替实现 getElementByID 返回id属性值指定的元素 getElementByName 返回name属性值指定的元素 getElementsByTagName 返回标签名指定的所有元素 c
11、reateElement 产生一个代表某元素的对象,随后可使用其他方法插入文档 createStyleSheet 产生一个样式表或增加一条样式规则属性:包括对应标签的一些属性和描述网页文档自身信息的一些属性 与标签相关的: alinkColor 超链接被选中时的颜色 linkColor 超链接正常状态的颜色 vlinkColor 访问过的超链接的颜色 bgColor 文档背景颜色 fgColor 文本默认前景色 注:指向当前文档自身 描述网页文档自身信息的: charset 设置/返回浏览器显示网页内容所使用的当前编码字符集 defaultCharset 返回浏览器的默认编码字符集内容 coo
12、kie 设置/返回Cookie字符串。 fileCreatedDate 返回该网页文档的创建时间的字符串格式 fileModifiedDate 返回该网页文档的修改时间的字符串格式 fileSize 返回当前网页文档的大小 lastModified 返回Web服务器向浏览器传递当前文档内容时,伴随发送的Last-Modified头所表示的日期的字符串格式。 URL 设置/返回浏览器访问当前网页时所采用的URL地址。大小写敏感;document.URL等同于location.href URLUnencoded 返回浏览器访问当前网页所采用的URL地址的URL解码后的字符串 referrer 返回
13、导航到当前网页的超链接源的URL地址。注意:由于HTTP协议作者拼写错误,HTTP协议头写成了Referer;但document.referrer中的拼写正确。事件:无特别事件,支持的事件都是通用的对象属性: forms数组:代表HTML文档中所有标签对的集合 anchors数组:代表HTML文档中所有指定了name属性或id属性的标签对的集合 links数组:代表HTML文档中所有指定了href属性的标签对的集合 images数组:代表HTML文档中所有标签的集合 scripts数组:代表HTML文档中所有标签对的集合 applets数组:代表HTML文档中所有标签对的集合 all数组:代表
14、HTML文档中所有指定标签对象的集合。不论HTML文档中是否存在、标签,all集合中都会包含这些标签相关的对象;若有标签,则不论是否存在标签,all集合中都会包含body对象 styleSheets数组:代表HTML文档中所有使用、或import语句定义或引入的样式表的集合 body对象:代表HTML文档中标签对;嵌套在标签对里层的HTML子元素,可以作为body对象的属性来引用 title对象:代表HTML文档中标签对;可以使用这个对象设置标题栏上的内容 数组的引用举例:document.all7.src document.all.img1.src document.allimg1.src
15、document.all.item(img1).src document.all.item(7).src document.images0.src document.images.img1.src document.imagesimg1.src document.images.item(img1).src document.images.item(0).src HTML元素的name和id属性值都可以作为数组所有字符串或item方法的参数来返回某个HTML标签对象。 在HTML中,不允许有两个id属性值相同的HTML元素,但可以有多个name属性值相同的HTML元素。 如果在HTML文档中,有
16、多个name属性值相同的元素,那么使用该name属性值作为item方法的参数,返回值是一个包含所有同名元素所对应的元素的对象的数组。 由于使用name属性值作为参数的item方法返回的对象可能是一个数组,所以程序应检查这个返回对象的length属性,来判断返回的对象是否是一个数组。 可以用if(obj.length!=null)、if(typeof(obj.length)!=undefined)或if(obj.length)中的任何一种形式,确定是否存在obj.length属性。 如果有多个name属性值相同的HTML元素,将name属性值作为数组索引,返回的是具有该name属性值的最后一个元
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript网页开发 第5章 DOM编程 张孝祥JavaScript网页开发 DOM 编程 张孝祥 JavaScript 网页 开发
限制150内