JavaScript基础(七)BOM--Browser Object Model浏览器对象模型

跟風遠走 提交于 2020-01-08 22:07:29

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

BOM:(Browser Object Mode) 浏览器对象模型。

1. BOM是browser object model的缩写,简称浏览器对象模型
2. BOM提供了独立于内容而与浏览器窗口进行交互的对象
3. 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
4. BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
5. BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
6. BOM最初是Netscape浏览器标准的一部分

BOM中定义了6种重要的对象:

1. window对象表示浏览器中打开的窗口;
2. document对象表示浏览器中加载页面的文档对象;
3. location对象包含了浏览器当前的URL信息;
4. navigator对象包含了浏览器本身的信息;
5. screen对象包含了客户端屏幕及渲染能力的信息;
6. history对象包含了浏览器访问网页的历史信息。

在浏览器宿主环境下,window对象就是JavaScript的Global对象,因此使用window对象的属性和方法是不需要特别指明的。比如alert完整的调用形式应该是window.alert。

window对象对应着Web浏览器的窗口,使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类:


1. 调整窗口的大小和位置;
2. 打开新窗口;
3. 系统提示框;
4. 状态栏控制;
5. 定时操作。

1. 调整窗口的大小和位置;
(1)window.moveBy
该方法将浏览器窗口移动指定的距离(相对定位)。
用法:window.moveBy(dx, dy)
(2)window.moveTo
该方法将浏览器窗口移动到指定的位置(绝对定位)。
用法:window.moveTo(x, y)
(3)window.resizeBy
该方法将浏览器窗口的大小改变为指定的宽度和高度(相对调整窗口大小)。
用法:window.resizeBy(dw, dh)
(4)window.resizeTo
该方法将浏览器窗口的大小改变为指定的宽度和高度(绝对调整窗口大小)。
用法:window.resizeTo(w, h)

2. 打开新窗口;
用法:window.open([url] [, target] [, options])
options参数可能的选项包括:
(1)height: 窗口的高度,单位为像素;
(2)width:窗口的宽度,单位为像素;
(3)left:窗口的左边缘位置;
(4)top:窗口的上边缘位置;
(5)fullscreen:是否全屏,默认值为no;
(6)location: 是否显示地址栏,默认值为yes;
(7)menubar: 是否显示菜单项,默认值为yes;
(8)resizable: 是否允许改变窗口大小,默认值为yes;
(9)scrollbars: 是否显示滚动条,默认值为yes;
(10)status: 是否显示状态栏,默认值为yes;
(11)titlebar: 是否显示标题栏,默认值为yes;
(12)toolbar: 是否显示工具条,默认值为yes。(7)menubar: 是否显示菜单项,默认值为yes;
(8)resizable: 是否允许改变窗口大小,默认值为yes;
(9)scrollbars: 是否显示滚动条,默认值为yes;
(10)status: 是否显示状态栏,默认值为yes;
(11)titlebar: 是否显示标题栏,默认值为yes;
(12)toolbar: 是否显示工具条,默认值为yes。

3.系统对话框;

(1)window.alert
该方法将显示消息提示框。
用法:window.alert([message])
(2)window.confir
该方法将显示一个确认提示框,其中包括“确定”和“取消”按钮。
用户单击“确定”按钮时,window.confirm返回true;单击“取消”按钮时,window.confirm返回false。
 用法:window.confirm([message])
(3)window.prompt
该方法将显示一个消息提示框,其中包含一个文本输入框。
用法:window.prompt([message] [, default])
(4)状态栏控制
浏览器状态的显示信息可以通过window.status属性直接进行修改。
(5)定时操作
定时操作通常有两种使用目的,一种是周期性地执行脚本,例如在页面上显示时钟,需要每隔一秒钟更新一次,
另一种则是将某个操作延时一段时间执行,例如某个特别耗时的操作,可以使用window.setTimeout函数使其延时执行,
而后面的脚本可以继续运行不受影响。
    1)window.setInterval
    该函数用于设置定时器,每隔一段时间执行指定的代码。
    用法:window.setInterval(code, interval)
    2)window.clearInterval
    该函数用于清除setInterval函数设置的定时器。
    用法:window.clearInterval(timer)
    3)window.setTimeout
    该函数用于设置定时器,在一段时间之后执行指定的代码。
   用法:window.setTimeout(code, time)
    4)window.clearTimeout
    该函数用于清除setTimeout函数设置的定时器。
    用法:window.clearTimeout(timer)


document对象
document对象实际上是window的属性,document对象的独特之处是它既属于BOM又属于DOM。
从BOM角度看,document对象由一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。
由于BOM没有统一的标准,各种浏览器中的document对象特性并不完全相同,因此在使用document对象时需要特别注意,
尽量要使用各类浏览器都支持的通用属性和方法。
( 1)通用属性
    1)document.bgColor 
    该属性为页面的背景色。
    2)document.fgColor 
    该属性为页面的前景色。
    3)document.linkColor
    该属性为页面文档中链接的颜色。
    4)document.vlinkColor
    该属性为页面文档中访问过的链接颜色。
    5)document.alinkColor
    该属性为页面文档中激活链接的颜色。
    6)document.domain
    该属性为文档所在的域名。
    7)document.referrer
    该属性为将用户引入当前页面的URL。
    8)document.URL
    该属性为当前页面的URL。
    9)document.title
    该属性为当前页面的标题。
    10)document.lastModified
    该属性为上次修改页面的时间。
    11)document.cookie
    该属性用于设置或者读取Cookie的值。 

 ( 2)集合属性
   
anchors:返回文档中所有锚的集合
    说明:IE中document.anchors将返回所有具有name或者id属性的锚;而在Mozilla Firefox中     
    document.anchors将返回所有具有name属性的锚
    applets:返回文档中所有applet的集合
    embeds:返回文档中所有embed对象的集合
    forms:返回文档中所有表单的集合
    images:返回文档中所有img对象的集合
    links:返回文档中所有链接的集合,即所有设置了href属性的<a>元素
3)方法   
    1)document.write/writeln
    该方法用于在当前文档中输出文字。
    用法:
    document.write(text)
    document.writeln(text)
    2)document.open
    document.open和document.close是一组方法,通常与document.write/writeln方法配合使用。
    其中,document.open方法用于打开文档准备写入内容。
    用法:document.open()
    3)document.close
    该方法用于关闭文档,同时将写入的内容输出到页面。
    用法:document.close()


location对象
    location.hash:当前页面的URL中“#”号后面的部分
    location.host:当前页面的URL中主机名和端口的部分
    location.hostname:主机名
    location.href:当前页面的URL
    location.pathname:当前页面的相对路径
    location.port:端口号
    location.protocol:协议名称
    location.search:当前页面的URL中问号后的部分


 navigator对象
    navigator对象包含了关于Web浏览器的信息,浏览器的类型、版本信息都可以从该对象中获取。
    navigator.appCodeName:浏览器代码名称
    navigator.appName:浏览器名称
    navigator.appVersion:浏览器运行平台和版本
    navigator.cookieEnabled:浏览器是否接受Cookie


 screen对象
    screen.height:屏幕的垂直分辨率,单位为像素
    screen.width:屏幕的水平分辨率,单位为像素
    screen.availHeight:可用的屏幕高度(排除操作系统元素占用的高度,如Windows任务栏的高度)
    screen.availWidth:可用的屏幕宽度(排除操作系统元素占用的宽度,如Windows任务栏的宽度)
    说明:通常情况下Windows任务栏位于窗口底部,此时screen.width与srceen.avialWidth相同
    screen.colorDepth:屏幕的色彩深度


history对象
    history.length:浏览历史记录的总数
    history.go(index):从浏览历史中加载URL,index参数是加载URL的相对位置,index为负数时表示当前地     址
    之前的浏览记录,index为正数时表示当前地址之后的浏览记录
    history.forward():从浏览历史中加载下一个URL,相当于history.go(1)
    history.back():从浏览历史中加载上一个URL,相当于history.go(-1)
    

 

 

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!