《JavaScript高级程序设计》学习笔记（BOM1）

最新推荐文章于 2025-09-13 09:06:35 发布

cloudgamer

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量933

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 浏览器 url mozilla 服务器文档

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/1550745

本文介绍了浏览器对象模型(BOM)中的关键对象，包括document、location和navigator等，详细阐述了这些对象的属性、方法及用途，帮助开发者更好地理解和操控浏览器环境。

《JavaScript高级程序设计》学习笔记（BOM1）

document对象

document对象实际上是window对象的属性。
这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。
从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。再有，由于BOM没有可以指导实现的标准，所以每个浏览器实现的document对象都稍有不同，这一节的重点是最常用的功能。

BOM的document对象的一些通用属性：
属性  说明
alinkColor 激活的链接的颜色，如<body alink="color">定义的*
bgColor  页面的背景颜色，如<body bgcolor="color">定义的*
fgColor  页面的文本颜色，如<body text="color">定义的*
lastModified 最后修改页面的日期，是字符串
linkColor 链接的颜色，如<body link="color">定义的*
referrer 浏览器历史中后退一个位置的URL
title  <title/>标签中显示的文本
URL  当前载入的页面的URL，或者设置新的URL，把窗口导航到新页面
vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的*
* 反对使用这些属性，因为它们引用了<body/>标签中的旧HTML特性。应该用样式表脚本代替它们。

document对象也有许多集合，提供对载入的页面的各个部分的访问。
集合  说明
anchors  页面中所有锚的集合（由<a name="anchorname"></a>表示）
applets  页面中所有applet的集合
embeds  页面中所有嵌入式对象的集合（由<embed/>标签表示）
forms  页面中所有表单的集合
images  页面中所有图像的集合
links  页面中所有链接的集合（由<a href="somewhere.htm"><a/>表示）

可用数字或名字引用document对象的每个集合，也就是说可用document.images[0]或document.images["image_name"]访问图像。

此外，链接和图像等的所有特性都变成了该对象的属性。
例如：
document.images[0].src 获取第一个图像的src特性的代码。

BOM的document对象还有几个方法。
write()方法或writeln()方法。
这两个方法都接受一个参数，即要写入文档的字符串。
它们之间唯一的区别是writeln()方法将在字符串末尾加一个换行符（/n）。

这两个方法都会把字符串的内容插入到调用它们的位置。这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串。
例如：
document.write("<p>hello</p>");

可以使用这种功能动态地引入外部JavaScript文件。
例如：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/"></scr"+"ipt>");
</script>
这段代码在页面上写了一个<script/>标签，将使浏览器像常规一样载入外部JavaScript文件。
注意：字符串"</script>"被分成两部分（"</src"和"ipt>"）。这是必要的，因为每当浏览器遇到</script>，它都假定其中的代码块是完整的（即使它出现在JavaScript字符串中）。
例如：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/"></script>");
</script>
浏览器显示如下网页：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/">
</script>
</script>
可以看到，忘记把字符串"</script>"分成两部分引起了严重的混乱。首先，在<script/>标签内有个语法错，因为document.write()的调用漏掉了闭括号。其次，有两个</script>标签。这就是在使用document.write()方法把<script/>标签写入页面时一定要把"</script>"字符串分开的原因。

注意，要插入内容属性，必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的，它将抹去原来页面的所有内容，显示指定的内容。

与write()和writeln()方法密切相关的是open()和close()方法。
open()方法用于打开已经载入的文档以便进行编写
close()方法用于关闭open()方法打开的文档，本质上显示写入其中的所有内容。
通常把这些方法结合在一起，用于向框架或新打开的窗口中写入内容
例如：
var oNewWin = window.open("about:blank","NewWin");
oNewWin.document.open();
oNewWin.document.write("hello");
oNewWin.document.close();

这个例子打开空白页（使用"about:blank"），然后写入新页面。要正确实现这一操作，在调用write()前，先调用open()方法。写完后，调用close()方法完成显示。
当你想显示无需返回服务器的页面时，这种方法非常有用。

location对象

BOM中最有用的对象之一是location对象，它是window对象和document对象的属性（对此没有什么标准，导致了一些混乱）。
location对象表示载入窗口的URL，此外，它还可以解析URL：

hash
如果URL包含#，该方法将返回该符号之后的内容
例如，index.htm#selection1的hash等于"#selection1"）。

host
服务器的名字（如www.wrox.com）。

hostname
通常等于host，有时会省略前面的www。

href
当前载入的页面的完整URL。

pathname
URL中主机名后的部分
例如，http://www.abc.com/pictures/index.htm的pathname是"/pictures/index.htm"。

port
URL中声明的请求的端口。默认情况下，大多数URL没有端口信息，所以该属性通常是空白的。
例如，http://www.somewhere.com:8080/index.htm这样的URL的port属性等于8080。

protocol
URL中使用的协议，即双斜杠（//）之前的部分。
例如，http://www.wrox.com中的protocol属性等于http:

search
执行GET请求的URL中的问号（?）后的部分，又称为查询字符串。
例如，search.htm?term=javascript中的search属性等于?term=javascript

location.href是最常用的属性，用于获取或设置窗口的URL（在这一点上，它类似于document.URL属性）。改变该属性的值，就可导航到新页面。
例如：
location.href = "web.htm";
采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，意味着Back按钮会导航到调用了该属性的页面。

assign()方法实现的是同样的操作
例如：
location.assign("web.htm");

replace()方法的操作与assign()方法，但不能从浏览器历史中访问它。
例如：
location.replace("web.htm");

reload()方法，可重新载入当前页面。
reload()方法有两种模式，即从浏览器缓存中重载，或从服务器端重载。
究竟采用哪种模式由该方法的参数值决定，如果是false，则从缓存中载入，如果是true，则从服务器端载入（默认值为false）。
例如：
location.replace(true); //从服务器端载入

注意：reload()方法调用后的代码可能被执行，也可能不被执行，这由网络延迟和系统资源等因素决定。因此，最好把reload()调用放在最后一行。

toString()方法，返回location.href的值。
例如：
alert(location.toString());

注意，location对象是window对象和document对象的属性，所以window.location和document.location互相等价，可以交换使用。

navigator对象

navigator对象是最早实现的BOM对象之一，它包含大量有关Web浏览器的信息。它也是window对象的属性，可以用window.navigator引用它，也可以用navigator引用。
同样，缺乏标准阻碍了navigator对象的发展，因为各个浏览器决定支持该对象的属性和方法。下表列出了最常用的属性和方法以及最常用的四种浏览器（IE、Mozilla、Opera和Safari）中哪个支持它们。

属性/方法说明
appCodeName 浏览器代码名的字符串表示（如"Mozilla"）
appName  官方浏览器名的字符串表示
appMinorVersion 额外版本信息的字符串表示
appVersion 浏览器版本信息的字符串表示
browserLanguage*浏览器或操作系统的语言的字符串表示
cookieEnabled 说明是否启用了cookie的Boolean值
cpuClassCPU 类别的字符串表示（"x86"、"68K"、"Alpha"、"PPC"或"other"）
javaEnabled() 说明是否启用了Java的Boolean值
language 浏览器语言的字符串表示
mimeTypes 注册到浏览器的mime类型的数组
onLine  说明浏览器是否连接到因特网上的Boolean值
oscpu  操作系统或CPU的字符串表示
platform 运行浏览器的计算机平台的字符串表示
plugins  安装在浏览器中的插件的数组
preference() 用于设置浏览器首选项的函数
product  产品名的字符串表示（如"Gecko"）
productSub 有关产品的额外信息的字符串表示（如Gecko版本）
opsProfile
securityPolicy
systemLanguage* 操作系统语言的字符串表示
taintEnabled() 说明是否启用了数据感染的Boolean值
userAgent 用户代理头字符串的字符串表示
userLanuage* 操作系统语言的字符串表示
userProfile 允许访问浏览器用户档案的对象
vendor  品牌浏览器名的字符串表示（如"Netscape6"或"Netscape"）
vendorSub 品牌浏览器的额外信息的字符串表示（如Netscape的版本）

* 大多数情况下，browserLanguage、systemLanguage和userLanguage相同。

在判断浏览器页面采用的是哪种浏览器方面时，navigator对象非常有用。在因特网上可迅速检索到许多检测浏览器的方法，它们都大量地利用了navigator对象。

screen对象

用screen对象获取某些关于用户屏幕的信息。

screen对象通常包含下列属性（不过，许多浏览器都加入了自己的属性）：
availHeight
窗口可以使用的屏幕的高度（以像素计），其中包括操作系统元素（如Windows工具栏）需要的空间。
availWidth
窗口可以使用的屏幕的宽度（以像素计）。
colorDepth
用户表示颜色的位数。大多数系统采用32位。
height
屏幕的高度，以像素计。
width
屏幕的宽度，以像素计。

可以跟window方法配合使用：
window.resizeTo(screen.availWidth, screen.availHeight);