JavaScript BOM对象详解:document、location、navigator与screen
本文深入解析JavaScript浏览器对象模型(BOM)中的核心对象。详细阐述document对象的属性与集合用法,解析location对象的URL属性及replace方法,介绍navigator对象检测浏览器信息的功能,并说明screen对象获取屏幕尺寸与颜色深度的实际应用。
文档对象
下表罗列了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 |
|
vlinkColor |
访问过的链接的颜色,如<body vlink="color">定义的* |
* 不推荐采用这些属性,因其引用了<body/>标签内的旧版HTML特性。应使用样式表脚本进行替代。
document对象还包含众多集合,用于访问已加载页面的不同部分。下表列出了这些集合:
|
集 合 |
说 明 |
|
anchors |
页面中所有锚的集合 |
|
applets |
页面中所有applet的集合 |
|
embeds |
页面中所有嵌入式对象的集合(由<embed/>标签表示) |
|
forms |
页面中所有表单的集合 |
|
images |
页面中所有图像的集合 |
|
links |
页面中所有链接的集合 |
与window.frame集合类似,可通过数字或名称引用document对象的各集合,例如通过document.images[0]或document.images["图片的name"]来访问图像。
位置对象
location对象表示当前载入窗口的URL,此外它还具备解析URL的功能。
hash——若URL包含#符号,该方法将返回该符号之后的内容(例如,http://www.somewhere.com/index#selection1的hash值为"#selection1")。
host——服务器名称(如www.wrox.com)。
hostname——通常与host相同,有时会省略前缀www。
href——当前载入页面的完整URL。
pathname——URL中主机名之后的部分。例如,http://www.somewhere.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.somewhere.com的protocol属性值为http:,ftp://www.somewhere.com的protocol属性值为ftp:。
search——执行GET请求的URL中问号(?)之后的部分,也称为查询字符串。例如,http://www.somewhere.com/abc.htm?term=javascript的search属性值为?term=javascript
若要跳转至某页面但不希望保留在浏览器历史记录中(即无法后退),可使用location.replace("http://www.baidu.com")方法。
导航器对象
用于检测浏览器版本、支持的MIME类型以及已安装的外挂程序(plug-in)。该对象包含两个子对象:外挂程序对象和MIME类型对象。
|
appCodeName |
代码 |
|
appName |
名称 |
|
appVersion |
版本 |
|
language |
语言 |
|
mimeType |
以数组表示所支持的MIME类型 |
|
platform |
编译浏览器的机器类型 |
|
plugins |
以数组表示已安装的外挂程序 |
|
userAgent |
用户代理程序的表头 |
屏幕对象
screen对象包含屏幕信息,通常具备以下属性(但许多浏览器会添加自定义属性):
height——屏幕高度,单位为像素。
width——屏幕宽度,单位为像素。
availHeight——窗口可用的屏幕高度(以像素计),已减去任务栏宽度。该值随用户任务栏变化,不随窗口大小改变,其中包含操作系统元素(如Windows工具栏)所需的空间。
availWidth——窗口可用的屏幕宽度(以像素计),已减去任务栏高度。该值随用户任务栏变化。
colorDepth——用户屏幕的颜色深度,以每像素位数计。实际上表示颜色的位数。大多数系统采用32位。
在确定新窗口大小时,availHeight和availWidth属性非常有用。例如,可使用以下代码填充用户屏幕:
moveTo(0,0);
resizeTo(screen.availWidth,screen,availHeight);
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比
2026-11-05 08:36:30
