第5章 DOM编程 张孝祥《JavaScript网页开发》.doc

第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 = myFun;3) 在一个专门的标签对中编写事件处理代码，例如 5.2 window对象（引用window对象的属性和方法时，可以省略window这个前缀）方法： alert 具有OK按钮的提示对话框 confirm 具有OK、Cancel按钮的对话框 prompt 输入信息的对话框，例如 prompt(提示信息, 默认值) close 关闭窗口（如果是open方式打开的子窗口，则关闭；如果是用户Get方式打开的，则提示是否关闭） navigate 导航到指定URL setInterval 设置浏览器每隔时间（单位：毫秒）调用指定代码，例如 setInterval(myFun(), 5000) setTimeout 设置浏览器经过时间（单位：毫秒）执行指定代码，例如 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 产生模式对话框窗口（不能改变窗口大小，没有菜单、工具条、状态栏等） showModelessDialog 产生非模式对话框窗口属性： closed 返回对应窗口是否关闭（一般用于检测子窗口，open返回值为子窗口window对象） opener 返回父窗口（打开本窗口的window对象） defaultstatus 设置/返回状态栏默认显示文本内容 status 设置/返回状态栏当前文本内容 screenTop 返回窗口左上角顶点在屏幕垂直位置 screenLeft 返回窗口左上角顶点在屏幕水平位置事件：（window对象事件处理器需要作为标签的事件属性设置） onload 装载完网页文档时。该属性还可用于、等，程序应放在对应标签之前 onunload 卸载网页文档之后 onbeforeunload 准备卸载网页文档之前。 可在此处设置 window.event.returnValue=某字符串，浏览器将弹出一个对话框提示用户是否真的要关闭、离开网页。 通用事件：（大多数HTML元素都能触发的事件） onclick 单击 onmousemove 鼠标移动 onmouseover 鼠标移入 onmouseout 鼠标移出 onmousedown 鼠标按键按下 onmouseup 鼠标按键弹起 onkeydown 键盘按键按下 onkeyup 键盘按键弹起 onkeypress 键盘击键（按下后弹起）对象属性： 1) location对象：设置/返回当前网页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、screenY属性：设置/返回鼠标相对屏幕顶点x、y坐标 offsetX、offsetY属性：设置/返回鼠标相对事件源顶点x、y坐标 x、y属性：设置/返回鼠标相对事件源的父元素顶点x、y坐标 returnValue：设置/返回事件的返回值 cancelBubble：设置/返回当前事件是否继续向下传递 srcElement：设置/返回事件源对象 keyCode：设置/返回键盘按下/弹起时那个按键的Unicode码 button：检索鼠标按键情况：1代表左键，2代表右键，3代表左右同时按下 注：HTML元素对象的tagName属性值中每个字母都是大写，例如 window.event.srcElement.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) parent.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文档动态写入内容，会覆盖之前完整写入（完全解析HTML文档或调用close方法）的内容 writeln 与write方法类似，多加一换行符 open 打开新文档，与window.open方法类似，建议使用后者 close 写完内容后，一定调用该方法关闭文档流 clear 清除文档所有内容，目前未得到完全支持，可用document.close();document.write();document.close();代替实现 getElementByID 返回id属性值指定的元素 getElementByName 返回name属性值指定的元素 getElementsByTagName 返回标签名指定的所有元素 createElement 产生一个代表某元素的对象，随后可使用其他方法插入文档 createStyleSheet 产生一个样式表或增加一条样式规则属性：包括对应标签的一些属性和描述网页文档自身信息的一些属性 与标签相关的： alinkColor 超链接被选中时的颜色 linkColor 超链接正常状态的颜色 vlinkColor 访问过的超链接的颜色 bgColor 文档背景颜色 fgColor 文本默认前景色 注：指向当前文档自身 描述网页文档自身信息的： charset 设置/返回浏览器显示网页内容所使用的当前编码字符集 defaultCharset 返回浏览器的默认编码字符集内容 cookie 设置/返回Cookie字符串。 fileCreatedDate 返回该网页文档的创建时间的字符串格式 fileModifiedDate 返回该网页文档的修改时间的字符串格式 fileSize 返回当前网页文档的大小 lastModified 返回Web服务器向浏览器传递当前文档内容时，伴随发送的Last-Modified头所表示的日期的字符串格式。 URL 设置/返回浏览器访问当前网页时所采用的URL地址。大小写敏感；document.URL等同于location.href URLUnencoded 返回浏览器访问当前网页所采用的URL地址的URL解码后的字符串 referrer 返回导航到当前网页的超链接源的URL地址。注意：由于HTTP协议作者拼写错误，HTTP协议头写成了Referer；但document.referrer中的拼写正确。事件：无特别事件，支持的事件都是通用的对象属性： forms数组：代表HTML文档中所有标签对的集合 anchors数组：代表HTML文档中所有指定了name属性或id属性的标签对的集合 links数组：代表HTML文档中所有指定了href属性的标签对的集合 images数组：代表HTML文档中所有标签的集合 scripts数组：代表HTML文档中所有标签对的集合 applets数组：代表HTML文档中所有标签对的集合 all数组：代表HTML文档中所有指定标签对象的集合。不论HTML文档中是否存在、标签，all集合中都会包含这些标签相关的对象；若有标签，则不论是否存在标签，all集合中都会包含body对象 styleSheets数组：代表HTML文档中所有使用、或import语句定义或引入的样式表的集合 body对象：代表HTML文档中标签对；嵌套在标签对里层的HTML子元素，可以作为body对象的属性来引用 title对象：代表HTML文档中标签对；可以使用这个对象设置标题栏上的内容 数组的引用举例：document.all7.src document.all.img1.src document.allimg1.src 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文档中，有多个name属性值相同的元素，那么使用该name属性值作为item方法的参数，返回值是一个包含所有同名元素所对应的元素的对象的数组。 由于使用name属性值作为参数的item方法返回的对象可能是一个数组，所以程序应检查这个返回对象的length属性，来判断返回的对象是否是一个数组。 可以用if(obj.length!=null)、if(typeof(obj.length)!=undefined)或if(obj.length)中的任何一种形式，确定是否存在obj.length属性。 如果有多个name属性值相同的HTML元素，将name属性值作为数组索引，返回的是具有该name属性值的最后一个元素所对应的对象，而不是所有对应对象的数组。 当使用name属性值作为数组索引字符串时，可以在这个字符串后面再传递一个整数索引号，称为子索引，代表在同组元素中的顺序号，例如 document.imagessample, 0 一些HTML元素的name属性值和id属性值也可以作为document对象的一个属性值直接引用；这些HTML元素通常都是document的forms、images、anchors等数组属性的成员，例如 document.img1.src、document.sample0.src（注意：由于有两个元素的name属性等于sample，所以sample属性本身又成了一个数组对象） 一些HTML元素的id属性值还可以作为window对象的属性来引用该元素对象，例如 window.sample0.src、sample0.src、window.img1.src、img1.src标签的专用的属性： defer 告诉浏览器在装载过程不用去分析和执行该标签对中的脚本代码，而在下载并分析完整个HTML部分的内容后，才执行该标签对中的脚本代码，这样能提供浏览器下载网页的性能 如果标签中无该属性，则标签对中的函数外代码在浏览器读到此处即运行；如果标签中设置了defer，则标签对中函数外代码在浏览器解析处理完网页文档中的所有其他内容后才开始执行 type 最近HTML和XHTML标准中，要求使用type属性代替language属性，使用格式例如 HTML 4.01标准建议再内放置一个标签，来说明HTML文档中所有脚本语言使用的默认语言类型，格式例如 language 指定脚本语言的类型；在最近的HTML和XHTML标准中已不再使用，最近的浏览器同时支持language和type属性 src 用于在HTML文档中引用一个单独保存JavaScript代码的.js文件Cookie属性： 每个Cookie必须有一个标识名称（NAME）和设置值（VALUE） 设置给document.cookie属性的值与其返回值不一样；设置是增加/覆盖的过程，不能在一次document.cookie属性设置语句中增加多个Cookie；读取document.cookie属性时，它返回的是浏览器当前所有可用的Cookie信息组合成的字符串 设置给document.cookie属性的字符串，必须以Cookie的名称和设置值（NAME=VALUE;）所组成的字段开头，后面可加上下列可选字段内容，后面的字段与前面的字段之间都用分号加空格分隔 expires=date; 设置Cookie在浏览器端保持有效的时间，date部分是GMT格式的字符串，例如 Fri, 31 Dec 1999 23:59:59 GMT 如果设置成以前的时间，浏览器立即删除这个Cookie；如果设置成未来的时间，浏览器将在文件系统中保存这个Cookie，直到date指定的时间之前都保持有效；如果没有设置该字段，浏览器将Cookie保存在自身进程的内存中，随浏览器关闭而消失 domain=domainname; 设置Cookie在哪个域中有效。浏览器访问这个域中的所有主机时，都将传送这个Cookie；如果没有设置该字段，Cookie只在浏览器访问当前主机时有效 path=path; 设置Cookie在有效域中的服务器上的哪个URL目录及其子目录中有效。如果没有设置该字段，Cookie只对浏览器访问当前请求的URL地址所在目录及其子目录下的所有页面时起作用 secure; 将Cookie信息设置成安全的，浏览器只有在安全环境下才能访问这个被储存的Cookie JavaScript程序通常在设置时使用escape函数对VALUE进行编码，在读取时用unescape函数解码5.4 body对象方法：body对象中大多数方法都是许多HTML元素对象所通用的方法 appendChild 可以将一个对象对应的HTML元素作为标签对中的最后一个元素，增加到标签对中。 例如： var oa = document.createElement(A); oa.href = (url); oa.innerText = 点击此处; document.body.appendChild(oa);属性：body对象除了具有一些自己专用的属性外，还具有大多数HTML元素对象所通用的属性 专用属性： 1) background 设置网页背景图片的URL 2) bgProperties 设置背景图片是否能随网页文档滚动。默认为空字符串，表示随文档滚动；如果设置为fixed，则不随网页文档滚动 3) text 设置/返回文本的显示颜色 4) topMargin、bottomMargin、leftMargin、rightMargin 分别设置/返回网页文档的上边距、下边距、左边距、右边距 通用属性： 1) id 设置/返回HTML元素的id属性值，用于指定唯一标识名 2) name 设置/返回HTML元素的name属性值 3) className 设置/返回HTML元素的class属性值 可以使用JavaScript和CSS，实现HTML元素上的动态效果 4) innerText 设置/返回HTML元素标签对之间的内容。设置时标签符号将作为普通文本显示；返回时不包含标签符号 5) innerHTML 设置/返回HTML元素标签对之间的内容。设置时标签符号将按HTML标签意义解释；返回时包含标签符号 6) outerText 设置/返回HTML元素标签对本身及其中的内容。设置时标签符号将作为普通文本显示；返回时不包含标签符号 7) outerHTML 设置/返回HTML元素标签对本身及其中的内容。设置时标签符号将按HTML标签意义解释；返回时包含标签符号 8) offsetTop、offsetLeft 返回对象元素边界左上角顶点相对上层HTML元素边界左上角顶点的垂直、水平位置 9) offsetWidth、offsetHeight 返回对象元素自身的宽度和高度 10) clientTop、clientLeft 返回对象上的客户区的左上角顶点相对自身边界左上角顶点的垂直、水平位置 11) clientWidth、clientHeight 返回对象上的可见客户区的宽度和高度，不包含滚动条、边框部分 12) scroll 设置/返回HTML元素对象中是否显示滚动条。该属性是字符串类型的，取值可以是yes、no、auto 13) scrollTop、scrollLeft 设置/返回元素上边界、左边界与当前被显示内容的上边界、左边界之间的距离 14) scrollWidth、scrollHeight 返回元素中的完整内容的宽度和高度，包含当前没有被显示出来的部分事件：body对象最常用的两个事件：onselectstart、onscroll onselectstart 在用户选取网页文档中的内容时发生。若返回false，可禁止用户在网页中选取内容，从而阻止复制 onscroll 在用户拖动窗口上的滚动条时发生 默认情况下，网页上所有内容都会随滚动条移动而移动。要想改变HTML元素的显示位置，必须设置其样式风格的position属性为absolute，再指定元素左上角顶点位置坐标，例如 style=position:absolute; left:0; top:50 在JavaScript中能够设置样式风格的HTML元素都有一个style属性对象，用于在JavaScript程序中设置HTML元素的样式风格对象属性： all数组：代表所有HTML子元素对象的集合 style对象：用于设置对象对应的HTML标签的样式风格 想隐藏某块内容，可使用 .style.display = none; 想重新显示，可使用 .style.display = block; 注：.style.top、.style.width之类的返回值是末尾具有px的字符串，但赋值可以直接使用整数，所以想读取整数时可以考虑使用.offsetTop、.offsetWidth之类的5.5 form对象方法： submit （form对象的专用方法）提交表单，但不引发onsubmit事件 item 返回表单中的某个表单字段元素对应的对象；不能返回类型的表单字段元素属性： 标签的name、target、title、enctype、method、action等属性均可由form对象访问 除此之外还有encoding属性可以访问标签的enctype属性，属JavaScript设计人员的失误，现渐渐改用enctype属性 注：在超链接标签的href属性中也可以使用javascript协议，例如 ；也可在form表单的action属性中使用javascript协议 注：设置HTML元素的name和id属性值，定义JavaScript中的变量名、函数名等时，都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突事件： onsubmit （form对象专有的事件）当用户单击提交按钮，或在表单单行文本输入框中按下回车键后，表单数据提交到Web服务器前发生 注：若在onsubmit的事件处理函数中使用submit方法提交表单，一般应return false;，否则将会提交两次对象属性： all数组：（通用属性）代表对象对应HTML标签中包含的所有HTML子元素对象的集合 elements数组 代表标签下除了之外的表单字段元素对象的