关于BOM模型

标签: bom 模型 | 发表时间:2016-05-15 22:24 | 作者:u011526599
出处:http://blog.csdn.net

当我们使用浏览器打开一个网页程序时,那么,js系统会自动创建对象,首先创建浏览器对象window,然后再为window对象创建它的子级对象,最后形成一个树状模型,这个就是BOM模型。BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

1.BOM对象模型

1.1BOM简介

BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。

1.2BOM模型的特点

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

1.3结构图


1.4用途

BOM中,可以获得与浏览器窗口交互的一些对象,例如可以移动,调整浏览器大小的window对象,可以用于导航的location对象与history对象,可以获取浏览器,操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等

2.window对象

从上图可以看出,window对象是所有对象的最顶级对象

也就是说,以前,我们写的   document.write() 实际上 window.document.write()

我们创建的所有全局变量和全局函数都是存储到window对象下的。

BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。

2.1window对象的方法

alert(message)               消息框

confirm(message)         确认框  如果点击确定,返回true,否则返回false

prompt(message[,defstr])          输入框  返回值为用户输入的数据

open(url[,name[,features]])    打开新窗口

close()                                        关闭窗口

blur()                                         失去焦点

focus()                                       获得焦点

print()                                        打印

moveBy(x,y)                            相对移动

moveTo(x,y)                                   绝对移动      

resizeBy(x,y)                            相对改变窗口尺寸

resizeTo(x,y)                           绝对改变窗口尺寸

scrollBy(x,y)                            相对滚动

scrollTo(x,y)                                   绝对滚动

setTimeout(表达式,毫秒)          设置定时器 执行一次

setInterval(表达式,毫秒)           设置定时器 反复执行

clearTimeout(定时器对象)           清除定时器

2.2使用方法举例

window.close(); //关闭窗口 
 
window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本 
 
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值 
 
window.prompt("What's your name?", "Default"); //提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回 
 
window.status //可以使状态栏的文本暂时改变 
 
window.defaultStatus //默认的状态栏信息,可在用户离开当前页面前一直改变文本 
 
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数 
 
window.clearTimeout("ID"); //取消还未执行的暂停,将暂停ID传递给它 
 
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样 
 
window.clearInterval("ID"); //取消时间间隔,将间隔ID传递给它 
 
window.history.go(-1); //访问浏览器窗口的历史,负数为后退,正数为前进 
 
window.history.back(); //同上 
 
window.history.forward(); //同上 
 
window.history.length //可以查看历史中的页面数  

2.3window对象的方法使用说明列表


2.4window对象详解


3.navigator对象

浏览器信息对象,包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用,也可用window.navigator引用它 

常见的属性

appCodeName       :内部代码

appName               :浏览器名称

appVersion             :版本号

platform                :操作系统

onLine                  :是否在线

cookieEnabled              :是否支持cookie

使用说明

 
navigator.appCodeName //浏览器代码名的字符串表示 
 
navigator.appName //官方浏览器名的字符串表示 
 
navigator.appVersion //浏览器版本信息的字符串表示 
 
navigator.cookieEnabled //如果启用cookie返回true,否则返回false 
 
navigator.javaEnabled //如果启用java返回true,否则返回false 
 
navigator.platform //浏览器所在计算机平台的字符串表示 
 
navigator.plugins //安装在浏览器中的插件数组 
 
navigator.taintEnabled //如果启用了数据污点返回true,否则返回false 
 
navigator.userAgent //用户代理头的字符串表示  

4.location对象

地址栏对象表示载入窗口的URL,也可用window.location引用它

host                      :主机名

port                      :端口号

href                      :完整的url信息

pathname               :路径地址

protocol                :协议

search                   :查询字符串

assign(url)             :用于页面跳转

使用说明

location.href //当前载入页面的完整URL,如http://www.somewhere.com/pictures/index.htm 
 
location.portocol //URL中使用的协议,即双斜杠之前的部分,如http 
 
location.host //服务器的名字,如www.wrox.com 
 
location.hostname //通常等于host,有时会省略前面的www 
 
location.port //URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080 
 
location.pathname //URL中主机名后的部分,如/pictures/index.htm 
 
location.search //执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx 
 
location.hash //如果URL包含#,返回该符号之后的内容,如#anchor1 
 
location.assign("http:www.baidu.com"); //同location.href,新地址都会被加到浏览器的历史栈中 
 
location.replace("http:www.baidu.com"); //同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问 
 
location.reload(true | false); //重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false 

5.screen对象

屏幕信息对象,用于获取某些关于用户屏幕的信息,也可用window.screen引用它

常用的属性

availHeight            可用高度      

availWidth             可用宽度

colorDepth            颜色质量

height                   高度

width                    宽度

使用说明

screen.width/height //屏幕的宽度与高度,以像素计 
 
screen.availWidth/availHeight //窗口可以使用的屏幕的宽度和高度,以像素计 
 
screen.colorDepth //用户表示颜色的位数,大多数系统采用32位 
 
window.moveTo(0, 0); 
 
window.resizeTo(screen.availWidth, screen.availHeight); //填充用户的屏幕 

6.document对象

文档对象,实际上是window对象的属性,document == window.document为true,是唯一一个既属于BOM又属于DOM的对象

常用属性和方法

linkColor               超链接颜色

alinkColor             作用中的超链接颜色

vlinkColor             作用后的超链接颜色

bgColor                 背景颜色

fgColor                 字体颜色

title                       文档标题

 

getElementById(“id”)

通过id属性值获取某个元素

getElementsByName(“name”)

通过name属性值获取某些元素

getElementsByTagName(“tagname”)

通过标签名获取某些元素

使用说明

document.lastModified //获取最后一次修改页面的日期的字符串表示 
 
document.referrer //用于跟踪用户从哪里链接过来的 
 
document.title //获取当前页面的标题,可读写 
 
document.URL //获取当前页面的URL,可读写 
 
document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚 
 
document.forms[0]或document.forms["formName"] //访问页面中所有的表单 
 
document.images[0]或document.images["imgName"] // 访问页面中所有的图像 
 
document.links [0]或document.links["linkName"] //访问页面中所有的链接 
 
document.applets [0]或document.applets["appletName"] //访问页面中所有的Applet 
 
document.embeds [0]或document.embeds["embedName"] //访问页面中所有的嵌入式对象 
 
document.write(); 或document.writeln(); //将字符串插入到调用它们的位置 

7.使用举例

7.1关于navigator、screen、location的使用

navigator.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//location对象
//location.href='index.jsp';
//screen对象
var width = window.screen.width;
var height = window.screen.height;
document.write('您屏幕的分辨率为:'+width+'*'+height+'<br/>');
//navigator对象
document.write(navigator.appCodeName+'<br/>');
document.write(navigator.appName+'<br/>');
document.write(navigator.appVersion+'<br/>');
document.write(navigator.platform+'<br/>');
document.write(navigator.cookieEnabled+'<br/>');
document.write(navigator.onLine+'<br/>');
//判断客户端是哪种浏览器
var version = navigator.appVersion;
if(version.indexOf('MSIE')>0){
	alert('IE');
}else{
	alert('W3C');
}
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>
  
  <body>
</body>
</html>

运行结果

IE


firefox


7.2关于document的使用

useDocument.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//使用document
window.onload=function(){
	//getElementById的使用
	document.getElementById("btn1").onclick=function(){
		document.getElementById("div1").innerHTML='Hello,javascript';
		document.getElementById("div1").style.color='red';
	};
	//getElementsByTagName的使用
	document.getElementById("btn2").onclick=function(){
		var div = document.getElementsByTagName("div");
		for(var i=0,len=div.length;i<len;i++){
			div[i].style.color='blue';
		}
	};
	//getElementsByName的使用
	document.getElementById("btn3").onclick=function(){
		var div = document.getElementsByName("ft");
		for(var i=0,len=div.length;i<len;i++){
			div[i].value='Hello!';
		}
	};
};
</script>
  </head>
  
  <body>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <input type="button" name="ft" id="btn1" value="byid"/>
  <input type="button" name="ft" id="btn2" value="bytagname"/>
  <input type="button" name="ft" id="btn3" value="byname"/>
</body>
</html>
运行结果



以上即为javascript中的BOM模型的简单介绍,需要在实际的运用中仔细体会。


作者:u011526599 发表于2016/5/15 22:24:21 原文链接
阅读:392 评论:0 查看评论

相关 [bom 模型] 推荐:

关于BOM模型

- - CSDN博客编程语言推荐文章
当我们使用浏览器打开一个网页程序时,那么,js系统会自动创建对象,首先创建浏览器对象window,然后再为window对象创建它的子级对象,最后形成一个树状模型,这个就是BOM模型. BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口. BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分.

BOM 和 JavaScript 中的 trim

- - JerryQu 的小站
今天遇到一个 IE7 下 JSON.parse 失败的问题. 经过排查发现:服务端某个配置文件编码是 UTF-8 + BOM,输出的字符串最开始包含了 BOM 字符,不是合法的 JSON. IE7 不支持原生 JSON,我们项目中使用的是 json2.js,但解析不了开头有 BOM 字符的 JSON 不是 json2 的错,其他浏览器正常是因为它们忽略了响应正文开头的 BOM.

UTF-8编码中BOM的检测与删除

- 競 - 火丁笔记
所谓BOM,全称是Byte Order Mark,它是一个Unicode字符,通常出现在文本的开头,用来标识字节序(Big/Little Endian),除此以外还可以标识编码(UTF-8/16/32),如果出现在文本中间,则解释为zero width no-break space. 注:Unicode相关知识的详细介绍请参考UTF-8, UTF-16, UTF-32 & BOM.

JSP, C 写入文件添加BOM头实例

- - CSDN博客推荐文章
注: 以下的状况不加BOM头也不会有中文乱码问题, 只是演示一下JSP输出文件如何加BOM头. out.write()是字节输出流的方法. out.print()是字符输出流的方法. 作者:oscar999 发表于2012-1-10 10:41:44 原文链接. 阅读:3 评论:0 查看评论.

java UTF-8 和 UTF-8 without BOM工具处理类

- - CSDN博客推荐文章
作者:shefron 发表于2014-8-27 15:52:22 原文链接. 阅读:6 评论:0 查看评论.

模型制作

- 小鱼儿 - 非正常人类研究中心 – Mtime时光网
1.材料:一大袋的一次性筷子(花了60块钱);5支502胶水;5张粗砂纸;记号笔一只;锋利的美工刀片若干,破剪刀一把. 就是这种屌毛筷子,质量也太他妈的差了点,80%都是弯的 . 随便提一下:我的脚丫子还是蛮性感滴 . 开始动工了!!  先做门框跟房子的底架. 3.不好意思,忘了交代一下了,我是先画图纸的,看到那张纸了没有.

MapReduce编程模型

- - CSDN博客云计算推荐文章
MapReduce是一个Google发明的编程模型,也是一个处理和生成超大规模数据集的算法模型的相关实现. 用户首先创建一个Map函数处理一个基于对的数据集合,输出的中间结果基于对的数据集合,然后再创建一个Reduce函数用来合并所有的具有相同中间Key值的中间Value值.

对象的消息模型

- loudly - 酷壳 - CoolShell.cn
[ ———— 感谢 Todd 同学 投递本文,原文链接 ———— ]. 话题从下面这段C++程序说起,你认为它可以顺利执行吗. 试试的确可以顺利运行输出hello world,奇怪吗. 其实并不奇怪,根据C++对象模型,类的非虚方法并不会存在于对象内存布局中,实际上编译器是把Hello方法转化成了类似这样的全局函数:.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.

论NoSQL的数据模型

- - NoSQLFan
本文内容是对《 NoSQL Data Modeling Techniques》一文的简单概述,原文对NoSQL的几种 数据模型进行了详细深入的讨论. 是了解NoSQL数据模型不过错过的全面资料. NoSQL的一些非功能性的特性,比如扩展性、性能以及一致性的讨论,目前已经有很多. 而对于NoSQL产品内部数据模型相关的知识一直比较欠缺,本文就希望能够系统地对NoSQL数据模型进行一些探讨.