javascript之BOM

一、BOM(The Browser ObjectModel):-浏览器对象模型,

(1)BOM提供了独立于内容而与浏览器窗口进行交互的对象。 (2)BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。 (3)BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

(4)BOM没有统一的标准,每种浏览器都有自己的BOM实现。

二、 基本的BOM体系结构图:

三、BOM主要对象详解:

1. Window对象:

window对象是BOM的顶层(核心)对象,因此调用它的子对象时可以不显示的指明window对象.

eg: window.alert("hello"); 等同于 alert("hello");

JavaScript中的任何一个全局函数或变量都是window的属性.

1.1 window对象的主要方法:

(1) moveBy(dx, dy); -- 窗口移动(dx,dy)个像素。

(2) moveTo(x, y); -- 窗口移动到(x,y)像素。

(3) resizeBy(dw, dh); -- 调整(dw,dy)个像素,当x、y的值大于0时为扩大,小于0时为缩小。

(4) resizeTo(w, h); -- 调整到宽为w个像素,高为h个像素。

(5) scrollTo(x, y); -- 将窗口中的内容滚动到指定位置。

(6) scrollBy(dx, dy); -- 将窗口中的内容滚动(dx,dy)个像素。

(7) focus(); -- 使得窗口得到焦点并执行由 onfocus 事件指定的代码。

(8) blur(); --把焦点从顶层窗口移开。

(9) alert(text); -- 弹出一个信息框。

(10) comfirm(text); -- 弹出一个确认框.

(11) prompt(text,Defaulttext); -- 弹出一个提示框

第一个参数是显示给用户看的文本

第二个参数就是文本框中的默认文本

返回值是用户写入文本框中的字符串。

(12) open(URL,Name,parameterList,replace); -- 创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址

第一个参数:要打开的网页url,可以是相对路径;

第二个参数:打开窗口的名称(还可以包括_self,_parent, _top及_blank几个特殊值) 第三个参数:用于描述打开窗口的特性,比如大小、是否有工具栏等。

注意:特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格。

第四个参数:布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定。

eg: window.open(“http://www.baidu.com/”,“_blank”,“height=150,width=300,top=10,left=10,resizable=yes”);

(13) close();--方法关闭一个浏览器窗口

(14) setTimeout(fn,time); -- 用于指定一段时间后执行某函数

第一个参数:可以是字符串组成的jascript代码,也可以是一个函数名称。

第二个参数:表示时间,毫秒为单位。

(15) clearTimeout(timer); -- 清除由setTimeout创建的定时器

eg: var iTimeoutId =setTimeout(“alert(‘Hello world!’)”, 1000);

clearTimeout(iTimeoutId);

(16) setInterval(fn,time); -- 用于周期性执行某函数;

(17) clearInterval(timer); -- 清除由setInterval指定的定时器;

(18) createPopup(); --创建弹出窗口。

(19) execScript(); -- 以给定语言执行指定的脚本。

(20) navigate(sURL); -- 跳转到指定 URL,只有IE有效.

(21) print(); --打印当前窗口的内容。

(22) showModalDialog(sURL [, vArguments] [,sFeatures]); --

sURL:必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments:可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures:可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 2.dialogWidth: 对话框宽度。 3.dialogLeft: 离屏幕左的距离。 4.dialogTop: 离屏幕上的距离。 5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。 8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

1.2 window对象的主要属性:

(1) screenX,screenY

测量窗口位置(Firefox 和 Safari支持)。

(2) screenLeft,screenRight

测量窗口位置(IE、Safari 和 Opera支持)。

(3) status,defaultStatus

用来来控制状态栏信息(设置或获取),其中,defaultStatus是指第一次载入页面时,使用的默认的状态栏信息.

(4) opener

获得打开本窗口的主窗口

eg:window.opener.msg

(5) closed

判断引用窗口是否已关闭。

(6) dialogArguments

设置或获取传递给模式对话框窗口的变量或变量数组。

(7) dialogHeight/dialogWidth/dialogLeft/dialogTop

设置或获取模式对话框的高度/宽度/左坐标/顶坐标。

(8) frameElement

获取在父文档中生成 window 的 frame 或 iframe 对象。

(9) length

设置或获取窗口中的框架数目。

(10) name

设置或获取窗口名称。

(11) offscreenBuffering

设置或获取对象在对用户可见之前是否要先在屏幕外绘制。

(12) parent

获取对象层次中的父窗口。

(13) returnValue

设置或获取从模式对话框返回的值。

(14) self

获取对当前窗口或框架的引用。

(15) top

获取最顶层的祖先窗口。

(16) innerwidth/innerheight

获取窗口的文档显示区的宽度/高度。

(17) outerwidth/outerheight

获取窗口的外部宽度/高度。

(18) pageXOffset/pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

2. document对象:

document对象是window对象的属性,window对象的任何属性和方法都可直接访问。它是唯一一个既属性BOM又属性DOM。

2.1 document对象的主要方法:

(1) addEventListener();--添加事件监听器

(2) appendChild();--添加节点

(3) createElement(); -- 创建节点

(4) getElementById(); -- 获得指定id的dom节点

(5) getElementsByName(); -- 获得指定名称的节点集合

(6) getElementsByTagName(); --获得指定标签的节点集合

(7) removeChild(); -- 删除子节点

(8) replaceChild(); -- 替换子节点

(9) insertBefore(); -- 在指定节点位置插入节点

(10) write()及writeln() --用于在文档中输出内容

eg: <script>document.write(newDate().getFullYear())</script>

(11) open(); --用于打开文档,准备输出内容

(12) close(); -- 关闭文档输出

2.2 document对象的主要属性:

普通属性:

(1) lastModifier -- 网页最后修改时间

(2)referrer -- 打开该文档的上一个页面

(3) title -- 文档的标题

(4) URL -- 文档的URL

(5) alinkColor -- 鼠标移到连接标签的颜色,body中alink属性的值

(6) bgColor -- 背景颜色,body标签中bgcolor属性的值

(7) linkColor -- 连接标签颜色,body中link属性的值

(8) fgColor -- 文本颜色,body中text属性的值

(9) vlinkColor -- 访问连接的颜色,body中vlink的值

集合属性:

(1) anchors -- 文档中的所有书签<a name="a1"></a>

(2) applets -- 获得文档中的所有applets对象

(3) embeds -- 获得文档中的所有embeds对象

(4) forms -- 获得文档中的所有表单对象

(5) images -- 获得文档中的所有图片对象

(6) links -- 获得文档中的所有连接对象<a href="test.html>aaa</a>

访问集合元素:document.links[0]或者document.links["a1"].

3. location对象:

location对象表示载入窗口的URL,还可以解析URL.

3.1 location对象的主要方法:

(1) assign(); -- 用于导向指定的连接

(2) replace(); -- 用于发射指定的连接,不会把打开的文档信息记录到历史记录中.

(3) reload(cache); -- 用于重新加载文档的内容, 参数cache表示是否允许从cache中加载

cache -- true : 从服务器加载.

-- false:从缓存中载入.

3.2 location对象的主要属性:

(1) href -- 获得url

(2) port /protocol -- 端口及协议

(3) search -- 地址中?后的字符串

(4) host /hostname -- 主机或主机名称

(5) hash -- 地址中#及后面的内容

4. navigator对象:

4.1 navigator对象的主要属性:

(1) appCodeName -- 产品名称

(2) appName -- 应用名称

(3) appVersion -- 版本号

(4) cookieEnabled -- 是否允许使用cookie

(5) language -- 语言

(6) oscpu -- 操作系统名称

(7) platform -- 操作系统平台

(8) product -- 产品代号或名称

(9) productSub -- 产品发布日期

(10) userAgent -- 客户端详细信息

(11) cpuclass -- 浏览器系统的 CPU 等级

5. screen对象:

5.1 screen对象的主要属性:

(1) availHeight -- 窗口可以使用的屏幕的高度(以像素计)

(2) availWidth -- 窗口可以使用的屏幕的宽度(以像素计)。 (3) colorDepth -- 用户表示颜色的位数,大多系统采用32位。 (4) height -- 屏幕的高度,以像素计。 (5) width -- 屏幕的高度,以像素计。

6. history对象:

6.1 history对象主要的方法:

(1) history.go(index); -- 在浏览器历史记录中跳转(正数为前跳,负数为后跳)

(2) history.back(); -- 后跳

(3) history.forward(); -- 前跳

6.2 history对象的主要属性:

(1)history.length; -- 获得历史记录的长度

原文发布于微信公众号 - java达人(drjava)

原文发表时间:2015-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day41_jQuery学习笔记_02

下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:

1212
来自专栏小樱的经验随笔

php实现图形计算器

存档: index.php 1 <html> 2 <head> 3 <title>图形计算器开发</title> 4 ...

5284
来自专栏超然的博客

react小结

在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。 

921
来自专栏代码世界

前端之BOM和DOM

BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。 DOM(Docu...

3875
来自专栏liulun

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

2069
来自专栏练小习的专栏

绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

1996
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

47314
来自专栏吾爱乐享

php学习之html小结1

1143
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

892
来自专栏河湾欢儿的专栏

Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一:...

1924

扫码关注云+社区

领取腾讯云代金券