javascript文档对象树DOM.docx
- 文档编号:10213502
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:16
- 大小:24.86KB
javascript文档对象树DOM.docx
《javascript文档对象树DOM.docx》由会员分享,可在线阅读,更多相关《javascript文档对象树DOM.docx(16页珍藏版)》请在冰点文库上搜索。
javascript文档对象树DOM
文档对象
现在我们将开始讨论更“实际”的话题——文档对象(DOM)。
文档对象是指在网页文档里划分出来的对象。
在JavaScript能够涉及的范围内有如下几个“大”对象:
window,document,location,navigator,screen,history等。
下面是一个文档对象树,你可以看到对象下包含对象的“壮观”情景。
要引用某个对象,就要把父级的对象都列出来。
例如,要引用某表单“applicationForm”的某文字框“customerName”,就要用“document.applicationForm.customerName”。
下表中有些对象是全小写的,有些是以大写字母开头的。
以大写字母开头的对象表示,引用该对象不使用下表列出的名字,而直接用对象的“名字”(Id或Name,下面有讲解),或用它所属的对象数组指定。
这里我们不准备讲解对象的“事件”,虽然我们也会列出对象所能响应的事件。
我们将会在下一章“事件处理”中讲解事件。
∙navigator
∙screen
∙window
ohistory
olocation
oframes[];Frame
odocument
▪anchors[];links[];Link
▪applets[]
▪embeds[]
▪forms[];Form
▪Button
▪Checkbox
▪elements[];Element
▪Hidden
▪Password
▪Radio
▪Reset
▪Select
▪options[];Option
▪Submit
▪Text
▪Textarea
▪images[];Image
浏览器对象
屏幕对象
窗口对象
历史对象
地址对象
框架对象
文档对象
连接对象
Java小程序对象
插件对象
表单对象
按钮对象
复选框对象
表单元素对象
隐藏对象
密码输入区对象
单选域对象
重置按钮对象
选择区(下拉菜单、列表)对象
选择项对象
提交按钮对象
文本框对象
多行文本输入区对象
图片对象
navigator浏览器对象反映了当前使用的浏览器的资料。
属性
appCodeName返回浏览器的“码名”(?
),流行的IE和NN都返回'Mozilla'。
appName返回浏览器名。
IE返回'MicrosoftInternetExplorer',NN返回'Netscape'。
appVersion返回浏览器版本,包括了大版本号、小版本号、语言、操作平台等信息。
platform返回浏览器的操作平台,对于Windows9x上的浏览器,返回'Win32'(大小写可能有差异)。
userAgent返回以上全部信息。
例如,IE5.01返回'Mozilla/4.0(compatible;MSIE5.01;Windows98)'。
javaEnabled()返回一个布尔值,代表当前浏览器允许不允许Java。
screen屏幕对象反映了当前用户的屏幕设置。
属性
width返回屏幕的宽度(像素数)。
height返回屏幕的高度。
availWidth返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)。
availHeight返回屏幕的可用高度。
colorDepth返回当前颜色设置所用的位数-1:
黑白;8:
256色;16:
增强色;24/32:
真彩色
window窗口对象最大的对象,它描述的是一个浏览器窗口。
一般要引用它的属性和方法时,不需要用“window.xxx”这种形式,而直接使用“xxx”。
一个框架页面也是一个窗口。
属性
name窗口的名称,由打开它的连接(
一般我们不会用这个属性。
status指窗口下方的“状态栏”所显示的内容。
通过对status赋值,可以改变状态栏的显示。
opener用法:
window.opener;返回打开本窗口的窗口对象。
注意:
返回的是一个窗口对象。
如果窗口不是由其他窗口打开的,在Netscape中这个属性返回null;在IE中返回“未定义”(undefined)。
undefined在一定程度上等于null。
注意:
undefined不是JavaScript常数,如果你企图使用“undefined”,那就真的返回“未定义”了。
self指窗口本身,它返回的对象跟window对象是一模一样的。
最常用的是“self.close()”,放在标记中:
“ self.close()">关闭窗口”。 parent返回窗口所属的框架页对象。 top返回占据整个浏览器窗口的最顶端的框架页对象。 history历史对象,见下。 location地址对象,见下。 document文档对象,见下。 方法 open()打开一个窗口。 用法: open( 描述所打开的窗口打开哪一个网页。 如果留空(''),则不打开任意网页。 <窗口名称字符串>: 描述被打开的窗口的名称(window.name),可以使用'_top'、'_blank'等内建名称。 这里的名称跟“ <参数字符串>: 描述被打开的窗口的样貌。 如果只需要打开一个普通窗口,该字符串留空(''),如果要指定样貌,就在字符串里写上一到多个参数,参数之间用逗号隔开。 例: 打开一个400x100的干净的窗口: open('','_blank','width=400,height=100,menubar=no,toolbar=no, location=no,directories=no,status=no,scrollbars=yes,resizable=yes') 参数 top=# 窗口顶部离开屏幕顶部的像素数 left=# 窗口左端离开屏幕左端的像素数 width=# 窗口的宽度 height=# 窗口的高度 menubar=... 窗口有没有菜单,取值yes或no toolbar=... 窗口有没有工具条,取值yes或no location=... 窗口有没有地址栏,取值yes或no directories=... 窗口有没有连接区,取值yes或no scrollbars=... 窗口有没有滚动条,取值yes或no status=... 窗口有没有状态栏,取值yes或no resizable=... 窗口给不给调整大小,取值yes或no open()方法有返回值,返回的就是它打开的窗口对象。 所以, varnewWindow=open('','_blank'); 这样把一个新窗口赋值到“newWindow”变量中,以后通过“newWindow”变量就可以控制窗口了。 close() 关闭一个已打开的窗口。 用法: window.close()或self.close(): 关闭本窗口; <窗口对象>.close(): 关闭指定的窗口。 如果该窗口有状态栏,调用该方法后浏览器会警告: “网页正在试图关闭窗口,是否关闭? ”然后等待用户选择是否;如果没有状态栏,调用该方法将直接关闭窗口。 blur() 使焦点从窗口移走,窗口变为“非活动窗口”。 focus() 是窗口获得焦点,变为“活动窗口”。 不过在Windows98,该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁,提示用户该窗口正在试图获得焦点。 scrollTo() 用法: [<窗口对象>.]scrollTo(x,y);使窗口滚动,使文档从左上角数起的(x,y)点滚动到窗口的左上角。 scrollBy() 用法: [<窗口对象>.]scrollBy(deltaX,deltaY);使窗口向右滚动deltaX像素,向下滚动deltaY像素。 如果取负值,则向相反的方向滚动。 resizeTo() 用法: [<窗口对象>.]resizeTo(width,height);使窗口调整大小到宽width像素,高height像素。 resizeBy() 用法: [<窗口对象>.]resizeBy(deltaWidth,deltaHeight);使窗口调整大小,宽增大deltaWidth像素,高增大deltaHeight像素。 如果取负值,则减少。 alert()用法: alert(<字符串>);弹出一个只包含“确定”按钮的对话框,显示<字符串>的内容,整个文档的读取、Script的运行都会暂停,直到用户按下“确定”。 confirm()用法: confirm(<字符串>);弹出一个包含“确定”和“取消”按钮的对话框,显示<字符串>的内容,要求用户做出选择,整个文档的读取、Script的运行都会暂停。 如果用户按下“确定”,则返回true值,如果按下“取消”,则返回false值。 prompt()用法: prompt(<字符串>[,<初始值>]);弹出一个包含“确认”“取消”和一个文本框的对话框,显示<字符串>的内容,要求用户在文本框输入一些数据,整个文档的读取、Script的运行都会暂停。 如果用户按下“确认”,则返回文本框里已有的内容,如果用户按下“取消”,则返回null值。 如果指定<初始值>,则文本框里会有默认值。 事件 onload;onunload;onresize;onblur;onfocus;onerror history历史对象历史对象指浏览器的浏览历史。 鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法。 属性 length历史的项数。 JavaScript所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。 本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。 方法 back()后退,跟按下“后退”键是等效的。 forward()前进,跟按下“前进”键是等效的。 go()用法: history.go(x);在历史的范围内去到指定的一个地址。 如果x<0,则后退x个地址,如果x>0,则前进x个地址,如果x==0,则刷新现在打开的网页。 history.go(0)跟location.reload()是等效的。 location地址对象它描述的是某一个窗口对象所打开的地址。 要表示当前窗口的地址,只需要使用“location”就行了;若要表示某一个窗口的地址,就使用“<窗口对象>.location”。 注意属于不同协议或不同主机的两个地址之间不能互相引用对方的location对象,这是出于安全性的需要。 例如,当前窗口打开的是“”下面的某一页,另外一个窗口(对象名为: bWindow)打开的是“”的网页。 如果在当前窗口使用“bWindow.location”,就会出错: “没有权限”。 这个错误是不能用错误处理程序(EventHandler,参阅onerror事件)来接收处理的。 属性 protocol返回地址的协议,取值为'http: ','https: ','file: '等等。 hostname返回地址的主机名,例如,一个“==''。 port返回地址的端口号,一般http的端口号是'80'。 host返回主机名和端口号,如: ': 8080'。 pathname返回路径名,如“=='b/c.html'。 hash返回“#”以及以后的内容,如“=='#chapter4';如果地址里没有“#”,则返回空字符串。 search返回“? ”以及以后的内容,如“=='? selection=3&jumpto=4';如果地址里没有“? ”,则返回空字符串。 href返回以上全部内容,也就是说,返回整个地址。 在浏览器的地址栏上怎么显示它就怎么返回。 如果想一个窗口对象打开某地址,可以使用“location.href='...'”,也可以直接用“location='...'”来达到此目的。 方法 reload()相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。 replace()打开一个URL,并取代历史对象中当前位置的地址。 用这个方法打开一个URL后,按下浏览器的“后退”键将不能返回到刚才的页面。 frames[];Frame框架对象请参阅“使用框架和Cookies”一章。 document文档对象描述当前窗口或指定窗口对象的文档。 它包含了文档从
用法:
document(当前窗口)
或<窗口对象>.document(指定窗口)
属性
cookie关于cookie请参看“使用框架和Cookies”一章。
lastModified当前文档的最后修改日期,是一个Date对象。
referrer如果当前文档是通过点击连接打开的,则referrer返回原来的URL。
title指
标记里用在Netscape里本属性不接受赋值。
fgColor指
标记的text属性所表示的文本颜色。bgColor指
标记的bgcolor属性所表示的背景颜色。linkColor指
标记的link属性所表示的连接颜色。alinkColor指
标记的alink属性所表示的活动连接颜色。vlinkColor指
标记的vlink属性所表示的已访问连接颜色。方法
open()打开文档以便JavaScript能向文档的当前位置(指插入JavaScript的位置)写入数据。
通常不需要用这个方法,在需要的时候JavaScript自动调用。
write();writeln()向文档写入数据,所写入的会当成标准文档HTML来处理。
writeln()与write()的不同点在于,writeln()在写入数据以后会加一个换行。
这个换行只是在HTML中换行,具体情况能不能够是显示出来的文字换行,要看插入JavaScript的位置而定。
如在
标记中插入,这个换行也会体现在文档中。clear()清空当前文档。
close()关闭文档,停止写入数据。
如果用了write[ln]()或clear()方法,就一定要用close()方法来保证所做的更改能够显示出来。
如果文档还没有完全读取,也就是说,JavaScript是插在文档中的,那就不必使用该方法。
现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。
--
varwhatsNew=open('','_blank','top=50,left=50,width=200,height=300,'+
'menubar=no,toolbar=no,directories=no,location=no,'+
'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('
更新通知 ');whatsNew.document.write('
最后更新日期:
00.08.01');
whatsNew.document.write('
00.08.01:
增加了“我的最爱”栏目。
');
whatsNew.document.write('
'+ '
self.close()">关闭窗口');
whatsNew.document.close();
-->
当然也可以先写好一个HTML文件,在open()方法中直接load这个文件。
anchors[];links[];Link连接对象
用法:
document.anchors[[x]];document.links[[x]];
; document.anchors是一个数组,包含了文档中所有锚标记(包含name属性的标记),按照在文档中的次序,从0开始给每个锚标记定义了一个下标。
document.links也是一个数组,包含了文档中所有连接标记(包含href属性的标记和
如果一个标记既有name属性,又有href属性,则它既是一个Anchor对象,又是一个Link对象。
在IE中,如果在标记中添加“id="..."”属性,则这个对象被赋予一个标识(ID),调用这个对象的时候只需要使用“
”就行了。 很多文档部件都可以用这个方法来赋予ID,但要注意不能有两个ID相同。
anchors和links作为数组,有数组的属性和方法。
单个Anchor对象没有属性;单个Link对象的属性见下。
属性
protocol;hostname;port;host;pathname;hash;search;href与location对象相同。
target返回/指定连接的目标窗口(字符串),与标记里的target属性是一样的。
事件
onclick;onmouseover;onmouseout;onmousedown;onmouseup
applets[]Java小程序对象它是一个数组,包含了文档中所有的Applet对象(Java小程序)。
作为一个数组,有数组的属性和方法。
关于单个Applet对象的属性和方法,我引用一句话:
“Applet对象继承了Java小程序的所有公共属性和方法。
”(英文原句:
TheAppletobjectinheritsallpublicpropertiesoftheJavaapplet./TheAppletobjectinheritsallpublicmethodssoftheJavaapplet.)因为本人很厌恶Java小程序,所以对它的什么“公共”“私有”的问题不感兴趣,也就没有探讨了。
embeds[]插件对象它是一个数组,包含了文档中所有的插件(
因为每个插件的不同,每个Embed对象也有不同的属性和方法。
forms[];Form表单对象document.forms[]是一个数组,包含了文档中所有的表单(
要引用单个表单,可以用document.forms[x],但是一般来说,人们都会这样做:
在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javascript 文档 对象 DOM