浏览器对象及层次关系

window对象

功       能:顶层对象,用来表示浏览器所打开的窗口

 

 

书写格式:

  1.正常书写: 窗口.属性      //窗口.方法();

  2.子 窗 口: opener.属性 //opener.方法();

  3.框       架: top.属性        //top.方法();

  4.当前窗口: self.属性        ///self.方法();  self也可以写成window

 

 

常见属性:

name         窗口的名字.

closed       判断窗口是否己经被关闭,返回布尔值

document, frames, history, location:  四个下级对象

length        窗口内的框架个数

opener      代表使用open打开当前窗口的父窗口

self            当前窗口

top             当前框架的最顶层窗口

 

defaultstatus  缺省的状态栏信息.

status        状态栏的信息.

浏览器外观:

scrollbars   浏览器的滚动条

toolbar       浏览器的的工具栏

menubar    浏览器的菜单栏

locationbar 浏览器的地址栏

网页内容区高度与宽度:innerHeight  innerWidth

网页边界的高度与宽度:outerHeight  outerWidth

网页左上角的坐标值 :pageXOffset  pageYOffset

 

 

 

常见方法:

open(URL,窗口名[,窗口规格])  打开一个新窗口.返回值为窗口名

close()     关闭窗口

moveBy(水平点数,垂直)  正值为窗口往右往下移动,负值相反

moveTo(x,y)   窗口移到x,y坐标处(左上角)

resizeBy(水平点数,垂直点数)  调整窗口大小,往右往下的增加

resizeTo(w,h)         调整窗口大小,宽w,高h

 

setTimeout(表达式,n毫秒数)  等待n毫秒后,运行表达式.返回名

clearTimeout(定时器名)     清除定时器

setInterval(表达式,n毫秒数)   每隔n毫秒,持行表达式,返回名

clearInterval(定时器名)            清除定时器

focus()       得到焦点

blur()          失去焦点

工具栏功能

home()       类似浏览器工具栏的  主页

stop()         类似浏览器工具栏的  停止

back()        类似浏览器工具栏的  后退

forward()    类似浏览器工具栏的  前进

 

alert(字符串)   传出警告信息

confirm(字符串)   传出警告信息,增加ok,cancel按钮,根据用户点击的按钮 返回true与false

prompt(提示,默认值)  弹出对话框,返回用户输入的文本

 

二级对象

history对象

功能:它为window对象的一个属性,用来存储客户端最近访问过的网页清单

属性: 
length     存储在记录清单中的网页数目
current   当前网页的地址
next        下一个历史记录的网页地址
previous 上一个历史记录的网页地址

方法:
back()      回到客户端查看过的上一页
forward() 回到客户端查看过的下一页
go(整数或URL字符串)  前往某个网页

location对象
功能:代表窗口的URL信息

protocol//host: port/path#hash?search

protocol: 通信协议
host:       主机名
port:        通信端口
path:       文件路径
hash:      定位锚点
search:   查询信息

属性:
href         完整的URL字符串
protocol URL的通信协议
host        URL中主机名
hostnameURL中host:port部分
port         URL的:端口port部分
hash       URL中定位锚点名称
search    以问号(?)开始的URL中的一部分,用于指定搜索信息

方法:
reload()  刷新,重新加载当前的网页
replace(网址) 用括号中的网址取代当前的网页

frame对象
每一个框架对象相当于窗口对象(window)

document对象
document对象代表当前的html对象

下级对象:
layer    link    image    form    area    applet    anchor     cookie

属性:
link    文挡中的一个<a href=>超链接标记,该属性本身是个对象
links  文件中的所有链接对象,以数组索引值表示
linkColor 文挡的链接颜色
alinkColor 活动链接颜色
vlinkColor  己点击的超链接颜色

layer, link, image, form, area, applet, anchor, cookie是document对象的几个子对象.
cookie  存储cookie.txt文件的一段信息

forms    文件中的所有表单,以数组索引值表示
images 文挡中所有image,以数组索引值表示
anchors 文挡中所有锚点,以数组索引值表示

bgColor  文挡中的背景颜色
fgColor   文挡中文本颜色
URL     表示该文件的网址
title     文挡的标题
lastModified  文挡最后的修改日期

方法:
write(字符串)   将字符串输出文件
getSelection()  获取当前选取的字符串,返回值是当前选取的字符串

document对象的下级对象

1.锚点对象anchor
当文挡包含<a>标记时,javascript自动建立相对应的锚点对象
引用格式: document.锚点名.属性         //document.锚点名.属性
                document.anchors[n].属性   //document.anchors[n].方法

属性:
name  表示锚点的名称

2.链接对象link
无论是文字,图形,多媒体,只要有超链接就有link对象
引用格式:同anchor

属性:
hash   表示URL字符串中锚点的名称
host    表示主机域名或IP地址
hostname  表示URL当中的host:port部分
href     完整的URL字符串
pathname  表示URL当中的目录路径(path)部分
port     表示URL当中的通信端口(port)部分
protocol  表示URL当中的通信协议部分
search 表示URL当中查询字符串部分
target  代表目标的窗口,即html中的target属性
text      表示a标记中的文字

3.图象对象image
当文件中包含<img>标记时,JavaScript自动建立image对象
建立对象:  new image([宽度][,高度])

属性:
src       图象的URL,对应html的src属性
border 图像的边框,border属性
width    图像的宽度,width属性
height  图象的高度,height属性
hspace 图象的水平空白,hspace属性
vspace 图像的垂直空白,vspace属性
lowsrc  图像的分辨版本,lowsrc属性
complete 判断浏览器是否完成图像的加载,布尔值

4.表单对象form
当文件中包含<form>标记时生成表单对象
引用格式:同anchor

常用属性:
name    表单名,相当于html<form>标识的name属性
action    action属性
method  method属性
elements 表单中的所有控件,以数组索引值表示
length    表单中的控件个数
textarea  text  fileupload  passward  hidden  sumit  radio  checkbox  button  reset  select表单的11个子对象,也是它的属性  //fileupload  这个属性不明确

form的下级对象

一.单行文本对象text
当javascript读到<input>标记中的type属性值为text时,自动建立一个文本按钮对象,并将该对象放到表单对象的elements数组当中
引用格式:document.forms[n].elements[n].属性   //document.forms[n].elements[n].方法
或            document.表单名.文本对象名.属性    //document.forms[n].文本对象.方法   混合用法

属性:
defaultValue  text对象的缺省值(对应html value属性初值)
name      text对象的名字(name属性)
value      text对象的当前值(value属性值)
form       text所在的表单.

常用方法:
blur()   失去焦点
focus() 得到焦点
select() 该对象设置成选取状态 

事件:

二.密码对象password
属性,方法,引用与单行文本text对象相同

三.多行文本对象textarea
属性,方法,引用与单行文本text对象相同

 

四.按钮对象button
当javascript读到<input>标记中的type属性值为button时,自动建立一个按钮对象,并将该对象放到表单对象的elements数组当中
引用格式:与单行文本相同

常用属性:
name   按钮对象的名字(与html name属性对应)
value   按钮显示的字符串
form     按钮所在的表单

常用方法:
blur()   失去焦点
focus() 得到焦点
click()   再该对象上单击鼠标左键

五.提交按钮对象submit
其属性,方法,引用格式,与按钮对象相同

六.重置按钮对象reset
其属性,方法,引用格式,与按钮对象相同

 

七.单选按钮radio
当javascript读到<input>标记中的type属性值为radio时,自动建立一个单选按钮对象,并将该对象放到表单对象的elements数组当中
引用格式:与单行文本相同

常用属性:
checked  设置该对象的选取状态,返回布尔值
defaultchecked  默认选取状态,
name   按钮对象的名字(与html name属性对应)
value   按钮的value属性值 0或1
form     按钮所在的表单

常用方法:
blur()   失去焦点
focus() 得到焦点
click()   再该对象上单击鼠标左键

事件:
1. onBlur   2.onFocus   3.onClick   4.onDblClick   5.onKeyDown    6.onKeyPress   7.onKeyUp   8.onMouseOver   9.onMouseUp   10.onMouseOut   11.onMouseDown   12.onMouseMove

八.复选框对象checkbox
其属性,方法,引用格式,事件与单选按钮对象相同

 

九.选择对象select
当javascript读到<select>标记时,自动建立一个单选选择对象,并将该对象放到表单对象的elements数组当中
引用格式:与前面相同

常用属性:
name  该对象的名字(与html, name属性相对应)
length  该对象option的数目
form  该对象所在表单
options 对应html的<option>标记,身也是对象
selectedIndex  代表选择项目的索引值(从0开始)

常用方法:
blur()   失去焦点
focus()  得到焦点

事件:
1. onBlur   2.onFocus   3.onClick   4.onDblClick   5.onKeyDown    6.onKeyPress   7.onKeyUp   8.onMouseOver   9.onMouseUp   10.onMouseOut   11.onMouseDown   12.onMouseMove

选项对象option //select的子对象
建立对象:new Option([文字,值,defaultSelected,selected]) //selected指定选中该选项 值对应html,value
属性:
defaultSelected  指定该选项为默认选择状态
index    所有选项构成的数组索引值
length   select.options数组的无素个数//同select对象的length
selected  是否被选中, 返回布尔值
text       该选项所显示的文字
value    选中后,传到服务器上的值