现在的位置: 首页 > 综合 > 正文

2、浏览器对象BOM

2018年02月05日 ⁄ 综合 ⁄ 共 10952字 ⁄ 字号 小 中 大 ⁄ 评论关闭

什么是BOM？

BOM是browser object model的缩写，简称浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C

BOM最初是Netscape浏览器标准的一部分

BOM功能简介：

从IE3和Netscape Navigator 3开始，浏览器都提供一种被称为BOM（Brower Object Model）的特性，它可以对浏览器窗口进行访问和操作。

利用BOM的相关技术，web开发者可以移动窗口、改变状态栏以及执行一些与页面中内容毫不相关的操作，例如：
- 弹出新的浏览窗口；
- 移动、关闭浏览窗口以及调整窗口大小；
- 提供web浏览器相关信息的导航对象；
- 提供页面详细信息的定位对象；
- 提供屏幕分辨率详细参数的屏幕对象；
- 支持cookie；
- 各种浏览器自身的一些特性，例如IE的ActiveX类等

BOM对象类别简介：

浏览器BOM对象，主要有：
- 窗口对象window；
- 浏览器信息对象navigator ；
- 屏幕对象screen；
- 网址对象location；
- 历史记录对象history；
- 文档对象document—— 窗体对象form； 锚点对象anchor；链接对象link；图像对象image；

BOM结构图

浏览器对象简介

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：示例
document.write("www.dreamdu.com");
window.document.write("www.dreamdu.com");

window对象：

- window对象表示浏览器中打开的窗口 。
- 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
- 在客户端 JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script language="javascript">
  var sTest="hai";
  document.write(sTest == window.sTest);
  </script>
 </body>
</html>

定义了一个sTest变量，因为是window对象下的变量，所以可以省略window.上述程序打印：true

window对象的方法：

window对象的常用方法举例
window.moveBy(20,15)：浏览器窗口相对于当前位置水平向右移动20px，垂直向下移动15px。
window.moveTo(100,100)：将窗口移动到用户屏幕的水平方向100px，垂直方向100px处。
window.resizeTo(240,360)：把窗口的宽度调整为240px，高度调整为360px。
window.resizeBy(-50,0)：相对于浏览器窗口的当前大小，把宽度减少50px，高度不变。
window.open(“http://www.sina.com”,”_blank”)：在一个新的窗口打开http://www.sina.com
window.open(“http://www.sina.com”,”_blank”,”height=300,width=400,top=30,left=40,resizable=yes”):在一个新的窗口打开http://www.sina.com，新窗口的宽度为400px，高度为300px；新窗口的显示坐标为（40，30）；新窗口的大小可以通过拖动动作来修改。

设置窗体外观的相关参数：

打开一个广告窗口的实例：

<HTML>
<HEAD>
<SCRIPT language="JavaScript"  >
function openwindow( )
{
 open("adv.htm", "", "toolbars=0, scrollbars=0,location=0, statusbars=0, menubars=0,resizable=0, width=650, height=150");
}
</SCRIPT>
</HEAD>
 <BODY onLoad="openwindow( )">
 <H2>看看和我一起打开的广告窗口</H2>
 </BODY>
</HTML>

新窗体添加内容实例：

<html>
 <head>
  <title>Document</title>
  <script language=javascript>

	 var newWindow = window.open("","myNewWindow","width=150,height=150");
	 newWindow.document.open();
	 newWindow.document.write("<html><head></head>");
	 newWindow.document.write("<body>This is a new window</body></html>");
	 newWindow.document.close();

  </script>
 </head>
 <body>
  
 </body>
</html>

Window 对象的常用属性：

window对象的属性遍历实例：

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	for (p in window) document.write(p + "<br />");
  </script>
 </head>
 <body>
  
 </body>
</html>

结果：

onbeforeunload
onafterprint
top
location
parent
offscreenBuffering
frameElement
onerror
screen
event
clipboardData
onresize
defaultStatus
onblur
window
onload
onscroll
screenTop
onfocus
Option
length
onbeforeprint
frames
self
clientInformation
XMLHttpRequest
external
screenLeft
opener
onunload
document
closed
history
Image
navigator
status
onhelp
name

Dialog对话框对象：

“对话框”是指那些为用户提供有用信息的弹出窗口。
常用“对话框”类型：
- alert()：向用户显示信息。
- confirm()：要求用户确认信息。
- prompt()：要求用户输入一个字符串。

简单对话框的应用：

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	<!--
//alert只接受一个参数，这个参数是一个字符串，alert所做的全部事情
//是将这个字符串原封不动地以一个提示框返回给用户。
alert("Good Morning!");
/*prompt是一个询问框，它产生一个询问输入窗口，同时等待用户输入的结果，
以继续执行下面的程序，当用户输入完成，点击确认后，它会将输入的字符串返回，
如果用户点击了取消按钮，它会返回null*/
alert("Hello,"+prompt("What's your name?")+"!");
//confirm是一个确认框，它产生一个YES|NO的确认提示框，如果回答了yes，返回true
//如果回答了no，返回false
if(confirm("Are you ok?"))
alert("Great!");
else
alert("oh,what's wrong?");
-->
  </script>
 </head>
 <body>
  
 </body>
</html>

状态栏对象：
除了创建明确不使用状态栏的浏览器窗口，每个浏览器窗口的底部都有一个状态栏，用来向用户显示一些特定的消息。
通过改变window.status或window.defaultStatus的值来改变状态栏的默认行为，如：
- JavaScript:setInterval(“window.status=new Date();”,1000);void(0);
- 以上代码输入浏览器地址栏后，可以在状态栏看到系统日期和时间。 

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	setInterval("window.status = new Date();",1000);
	void(0);
  </script>
 </head>
 <body>
  
 </body>
</html>

navigator对象:

navigator对象代表浏览器的总体信息，这些信息只能读取不能设置。
navigator对象有5个主要属性用于提供正在运行的浏览器的版本信息：
- appName：web浏览器的简单名称；
- appVersion：浏览器的内部版本号和其他版本信息。
- userAgent：包含浏览器的内码名称及版本号，用于识别用户。

- appCodeName：浏览器的代码名。
- platform：用户操作系统。

使用循环列出navigator属性：

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	for (p in window.navigator) document.write(p + "<br />");
  </script>
 </head>
 <body>
  
 </body>
</html>

结果：

appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage
appVersion
userAgent
onLine
cookieEnabled
mimeTypes

运行这些语句：

document.write(navigator.appName + "<br />");
document.write(navigator.appVersion + "<br />");
document.write(navigator.userAgent + "<br />");
document.write(navigator.appCodeName + "<br />");
document.write(navigator.platform + "<br />");

显示：

Microsoft Internet Explorer
4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET4.0E; .NET4.0C)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET4.0E; .NET4.0C)
Mozilla
Win32

遍历：

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	for(var i in window.navigator)
	document.write(i+"="+window.navigator[i]+"<br/>");

  </script>
 </head>
 <body>
  
 </body>
</html>

appCodeName=Mozilla

appName=Microsoft Internet Explorer
appMinorVersion=0
cpuClass=x86
platform=Win32
plugins=
opsProfile=null
userProfile=null
systemLanguage=zh-cn
userLanguage=zh-cn
appVersion=4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET4.0E; .NET4.0C)
userAgent=Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET4.0E; .NET4.0C)
onLine=true
cookieEnabled=true
mimeTypes=

screen对象：

该对象提供显示器的分辨率和可用颜色数信息；
主要属性如下：
- weidth,height:表示显示器的分辨率，即整个屏幕的尺寸，以px为单位；
- availWidth，availHeight：表示实际可用的显示空间大小，以px为单位；
- colorDepth：表示浏览器可以显示的颜色数的位数。

使用screen对象获得屏幕属性：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript">
  document.write("屏幕宽度是：" + window.screen.width + "<br />");
  document.write("屏幕高度是：" + window.screen.height + "<br />");
  document.write("屏幕色深是：" + window.screen.colorDepth + "<br />");
  document.write("屏幕可用宽度是：" + window.screen.availWidth + "<br />");
  document.write("屏幕可用高度是：" + window.screen.availHeight + "<br />");

  </script>
 </head>
 <body>
  
 </body>
</html>

屏幕宽度是：1600

屏幕高度是：900
屏幕色深是：32
屏幕可用宽度是：1600
屏幕可用高度是：870
我的屏幕设置是：


检测屏幕分辨率，确定分辨率的程序实例：

 <script type="text/javascript">
 <!--
  var s = 800; //确定最佳屏幕显示效果
  var cv = 24; //确定最佳色彩度
  if(screen.width > s)
  {
	document.write("你的屏幕分辨率是:" + screen.width + "×" + screen.height + 
	        "并非最佳分辨率")
  }
  -->
  </script>

Location对象 ：
Location 对象 ：代表当前窗口中显示的文档的URL。
- 属性

 - 函数


遍历location对象的属性：

<html>
 <head>
  <title>Document</title>
  <script type="text/javascript">
	for(var i in window.location)
	document.write(i+"="+window.location[i]+"<br/>");

  </script>
 </head>
 <body>
  
 </body>
</html>

结果：

hostname=192.168.1.30

href=http://192.168.1.30:81/w1.html
host=192.168.1.30:81
hash=
port=81
pathname=/w1.html
search=
protocol=http:

History对象 ：

函数：


back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进1页，等价于forward( )方法；
go(-1) 代表后退1页，等价于back( )方法；

BOM对象——常用文档对象：

- 文档对象document；
- 窗体对象form；
- 锚点对象anchor；
- 链接对象link；
- 图像对象image；

文档对象document概述：
- document对象代表一个浏览器窗口或框架中显示的HTML文件。
- 浏览器在加载HTML文档时，为每一个HTML文档创建相应的document对象。
- document对象是window对象的一个属性，引用它时，可以省略window前缀。
- document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。这些子对象可以控制HTML文档中的对应元素，使我们可以从脚本中对 HTML 页面中的所有元素进行访问

document 对象的主要属性：


主要属性应用：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript">
	with(document)
	{
		write("最后一次修改时间" + document.lastModified + "<br />");
		write("标题" + document.title + "<br />");
		write("URL" + document.URL + "<br />");
		
	}

  </script>
 </head>
 <body>
  
 </body>
</html>

结果：

最后一次修改时间09/09/2014 22:05:53
标题Document
URLfile://C:\yemian\w6.html

document 对象的集合：

实例：集合的使用

页面中的所有表单都可以通过Document对象的forms[]集合来访问：
- document.forms[0]指的是文档中的第一个表单
- document.forms[document.forms.length-1]指的是文档中的最后一个表单
通过下面的代码将页面中所有超链接的弹出位置设置为新窗口。
var myLinks=document.links;
for(var i=0;i<myLinks.length;i++)
myLinks[i].target=“_blank”;

document 对象的方法：


举例：初识document对象的应用
document.title=“new title”;//修改文档标题
document.open();//开启文档
document.write(“some words”);//写入数据
document.writeln(“some words”);//写入数据
document.close();//关闭文档

举例：document对象的使用

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  </head>
 <body>
  输入你的姓名：<input type="text" id="name" />
  <button onclick="greeting()">greeting</button>
  <script type="text/javascript">
  <!--
  function greeting()
  {
    var newWin = window.open();

	//获得id为name的DOM元素
	var name = document.getElementById("name");

	with(newWin.document)
	  {
		open();
		//通常这里的open（）可以省略，在执行write前浏览器会自动执行document.open()的动作
		write("hello,"+ name.value + 
		"<br/>Nice to see you!<br/>some notes for you:<br/>" 
		+ "<textarea>here is some message...</textarea><br/><button onclick='self.close()'>Good bye!</button>");
		close();
	  }
  }
  -->
  </script>
 </body>
</html>

运行结果：

练习：修改文档的标题
新建一空白网页；
在页面上插入文本输入框及按钮；
浏览网页，在文本框输入文本；
单击按钮，将文本框内输入的内容作为新的网页标题。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  </head>
 <body>
  输入标题名：<input type="text" id="name" />
  <button onclick="greeting()">greeting</button>
  <script type="text/javascript">
  <!--
  function greeting()
  {
   	var name = document.getElementById("name");

	document.title = name.value; 
	  
  }
  -->
  </script>
 </body>
</html>

Form表单对象简介

- 一个页面文档中存在的一个表单对应一个Form对象，多个表单对应多个Form对象；
- Form对象最有用的属性是elements[]集合，它包含各种表单输入元素的JavaScript对象

Form对象的常用属性：

Form对象的常用方法及事件

方法：


事件：

举例：Form和elements的引用

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  </head>
 <body>
<form action="" method="get" onsubmit="show(this)">
姓名：<input name="username" type="text" /><br/>
密码：<input name="password" type="password" /><br/>
<input name="submit" type="submit" value="提交" />  <input name="reset" type="reset" value="重置" />
</form>
<script type="text/javascript">
function show(form)
{
	for(i=0;i<form.elements.length;i++)
	{
	document.write(form.elements[i].name+"="+form.elements[i].value+"<br/>");
	}
}
</script>
</body>
</html>

密码没有显示出来，提示错误，

锚点对象anchor和链接对象link
- 每设置一个有name属性的<a>标签，就建立了一个锚点对象；每设置一个<area>标签或<a>标签，就建立了一个link对象。
- anchor 对象通常以数组的形式表示网页中的所有锚点； links 集合可返回对文档中所有 Area 和 Link 对象的引用。
- anchor数组以锚点在文档中出现的顺序存储锚点；
- anchor数组的下标从0开始，通过指定下标可以访问和查找某个锚点，或者使用 document.getElementById()。

anchor对象和link对象的常用属性
- name：设置或返回一个链接的名称。
- id：设置或返回一个链接的id。
- href：设置或返回被链接资源的URL。
- target：设置或返回在何处打开链接，属性值如下：
    - _blank： 在一个新的未命名的窗口载入文档 
    - _self ：在相同的框架或窗口中载入目标文档 
    - _parent ： 把文档载入父窗口或包含了超链接引用的框架的框架集 
    - _top：把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 

图像对象image
- 每设置一个<img>标签，就建立了一个图像对象。
- image 对象通常以数组的形式表示网页中的所有图像。
- images数组以图像在文档中出现的顺序存储图像。
- images数组的下标从0开始，通过指定下标可以访问和查找某个图像，或者使用 <img>标签的name属性代替下标进行访问。

通过对BOM的了解，尤其是BOM结构图，我们应该有这样的理解：

打开浏览器时，就建立了BOM对象，通过url访问网页，传过来的html文件在浏览器中形成DOM对象，javascript通过操作BOM和DOM做各种操作和修改。

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞