BOM知识点总结

末蓝、 2022-05-24 08:52 228阅读 0赞

# 一、 BOM    #

BOM 是 browser object model 的缩写，简称浏览器对象模型。 主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口， 可以对浏览器窗口进行访问和操作， 譬如可以弹出新的窗口， 回退历史记录， 获取 url……

# 二、 BOM 与 DOM（Document Object Model） 的关系 #

1、 javacsript 是通过访问 BOM 对象来访问、 控制、 修改浏览器  
2、 BOM 的 window 包含了 document， 因此通过 window 对象的 document 属性就可以访问、检索、 修改文档内容与结构。  
3、 document 对象又是 DOM 模型的根节点。因此， BOM 包含了 DOM， 浏览器提供出来给予访问的是 BOM 对象， 从 BOM 对象再访问到 DOM 对象， 从而 js 可以操作浏览器以及浏览器读取到的文档

![Center][]

# 三、 BOM 对象包含以下内容 #

**Window**        JavaScript 层级中的顶层对象， 表示浏览器窗口。  
**Navigator**     包含客户端浏览器的信息。  
**History **        包含了浏览器窗口访问过的 URL。  
**Location**       包含了当前 URL 的信息。  
**Screen**          包含客户端显示屏的信息。

## Window 对象 ##

Window 对象表示一个浏览器窗口或一个框架。 在客户端 JavaScript 中， Window 对象是全局对象， 所有的表达式都在当前的环境中计算。 也就是说， 要引用当前窗口根本不需要特殊的语法， 可以把那个窗口的属性作为全局变量来使用。 例如， 可以只写 document， 而不必写 window.document。

### window 对象属性 ###

<table> 
 <tbody> 
 <tr> 
 <td>closed </td> 
 <td>返回窗口是否已被关闭。</td> 
 </tr> 
 <tr> 
 <td>defaultStatus </td> 
 <td>设置或返回窗口状态栏中的默认文本。 （仅 Opera 支持）</td> 
 </tr> 
 <tr> 
 <td>document </td> 
 <td>对 Document 对象的只读引用。 请参阅 Document 对象。</td> 
 </tr> 
 <tr> 
 <td>history </td> 
 <td>对 History 对象的只读引用。 请参数 History 对象。</td> 
 </tr> 
 <tr> 
 <td>innerheight </td> 
 <td>返回窗口的文档显示区的高度。</td> 
 </tr> 
 <tr> 
 <td>innerwidth </td> 
 <td>返回窗口的文档显示区的宽度。</td> 
 </tr> 
 <tr> 
 <td>length </td> 
 <td>设置或返回窗口中的框架数量。</td> 
 </tr> 
 <tr> 
 <td>location </td> 
 <td>用于窗口或框架的 Location 对象。 请参阅 Location 对象。</td> 
 </tr> 
 <tr> 
 <td>name </td> 
 <td>设置或返回窗口的名称。</td> 
 </tr> 
 <tr> 
 <td>Navigator </td> 
 <td>对 Navigator 对象的只读引用。 请参数 Navigator 对象。</td> 
 </tr> 
 <tr> 
 <td>opener </td> 
 <td>返回对创建此窗口的窗口的引用。</td> 
 </tr> 
 <tr> 
 <td>outerheight </td> 
 <td>返回窗口的外部高度。</td> 
 </tr> 
 <tr> 
 <td>outerwidth </td> 
 <td>返回窗口的外部宽度。</td> 
 </tr> 
 <tr> 
 <td>pageXOffset </td> 
 <td>设置或返回当前页面相对于窗口显示区左上角的 X 位置。</td> 
 </tr> 
 <tr> 
 <td>pageYOffset </td> 
 <td>设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</td> 
 </tr> 
 <tr> 
 <td>parent </td> 
 <td>返回父窗口。</td> 
 </tr> 
 <tr> 
 <td>Screen </td> 
 <td>对 Screen 对象的只读引用。 请参数 Screen 对象。</td> 
 </tr> 
 <tr> 
 <td>self </td> 
 <td>返回对当前窗口的引用。 等价于 Window 属性。</td> 
 </tr> 
 <tr> 
 <td>status </td> 
 <td>设置窗口状态栏的文本。 (默认只支持 Opera)</td> 
 </tr> 
 <tr> 
 <td>top </td> 
 <td>返回最顶层的先辈窗口。</td> 
 </tr> 
 <tr> 
 <td>window </td> 
 <td>window 属性等价于 self 属性， 它包含了对窗口自身的引用。</td> 
 </tr> 
 <tr> 
 <td>screenLeft screenTop screenX screenY</td> 
 <td>只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。 IE、 Safari、 Chrome 和 Opera 支持 screenLeft 和 screenTop， 而 Chrome、 Firefox 和 Safari 支持 screenX 和 screenY。</td> 
 </tr> 
 </tbody> 
</table>

##  window 对象方法 ##

##  ##

<table> 
 <tbody> 
 <tr> 
 <td>alert() </td> 
 <td>显示带有一段消息和一个确认按钮的警告框。</td> 
 </tr> 
 <tr> 
 <td>blur() </td> 
 <td>把键盘焦点从顶层窗口移开。</td> 
 </tr> 
 <tr> 
 <td>clearInterval() </td> 
 <td>取消由 setInterval() 设置的 timeout。</td> 
 </tr> 
 <tr> 
 <td>clearTimeout() </td> 
 <td>取消由 setTimeout() 方法设置的 timeout。</td> 
 </tr> 
 <tr> 
 <td>close() </td> 
 <td>关闭浏览器窗口。</td> 
 </tr> 
 <tr> 
 <td>confirm() </td> 
 <td>显示带有一段消息以及确认按钮和取消按钮的对话框。</td> 
 </tr> 
 <tr> 
 <td>createPopup() </td> 
 <td>创建一个弹出窗口。 只有 ie 支持（不包括 ie11）</td> 
 </tr> 
 <tr> 
 <td>focus() </td> 
 <td>把键盘焦点给予一个窗口。</td> 
 </tr> 
 <tr> 
 <td>moveBy() </td> 
 <td>可相对窗口的当前坐标把它移动指定的像素。</td> 
 </tr> 
 <tr> 
 <td>moveTo() </td> 
 <td>把窗口的左上角移动到一个指定的坐标。</td> 
 </tr> 
 <tr> 
 <td>open()</td> 
 <td>打开一个新的浏览器窗口或查找一个已命名的窗口。 window.open(URL,name,features,replace)</td> 
 </tr> 
 <tr> 
 <td>print() </td> 
 <td>打印当前窗口的内容。</td> 
 </tr> 
 <tr> 
 <td>prompt() </td> 
 <td>显示可提示用户输入的对话框。</td> 
 </tr> 
 <tr> 
 <td>resizeBy() </td> 
 <td>按照指定的像素调整窗口的大小。</td> 
 </tr> 
 <tr> 
 <td>resizeTo() </td> 
 <td>把窗口的大小调整到指定的宽度和高度。</td> 
 </tr> 
 <tr> 
 <td>scrollBy() </td> 
 <td>按照指定的像素值来滚动内容。</td> 
 </tr> 
 <tr> 
 <td>scrollTo() </td> 
 <td>把内容滚动到指定的坐标。</td> 
 </tr> 
 <tr> 
 <td>setInterval() </td> 
 <td>按照指定的周期（以毫秒计） 来调用函数或计算表达式。</td> 
 </tr> 
 <tr> 
 <td>setTimeout() </td> 
 <td>在指定的毫秒数后调用函数或计算表达式。</td> 
 </tr> 
 </tbody> 
</table>

### Navigator 对象 ###

Navigator 对象包含的属性描述了正在使用的浏览器。 可以使用这些属性进行平台专用的配置。 虽然这个对象的  
名称显而易见的是 Netscape 的 Navigator 浏览器， 但其他实现了 JavaScript 的浏览器也支持这个对象。

###  Navigator 对象属性 ###

<table> 
 <tbody> 
 <tr> 
 <td>appCodeName </td> 
 <td>返回浏览器的代码名。 以 Netscape 代码为基础的浏览器中， 它的值是 "Mozilla"。 为兼容 Microsoft 也是</td> 
 </tr> 
 <tr> 
 <td>appMinorVersion </td> 
 <td>返回浏览器的次级版本。 （IE4、 Opera 支持）</td> 
 </tr> 
 <tr> 
 <td>appName </td> 
 <td>返回浏览器的名称。</td> 
 </tr> 
 <tr> 
 <td>appVersion </td> 
 <td>返回浏览器的平台和版本信息。</td> 
 </tr> 
 <tr> 
 <td>browserLanguage </td> 
 <td>返回当前浏览器的语言。 （IE 和 Opera 支持）</td> 
 </tr> 
 </tbody> 
</table>

<table style="height:370px;"> 
 <tbody> 
 <tr> 
 <td>cookieEnabled </td> 
 <td>返回指明浏览器中是否启用 cookie 的布尔值。</td> 
 </tr> 
 <tr> 
 <td>cpuClass </td> 
 <td>返回浏览器系统的 CPU 等级。 （IE 支持）</td> 
 </tr> 
 <tr> 
 <td>onLine </td> 
 <td>返回指明系统是否处于脱机模式的布尔值。</td> 
 </tr> 
 <tr> 
 <td>platform </td> 
 <td>返回运行浏览器的操作系统平台。</td> 
 </tr> 
 <tr> 
 <td>systemLanguage </td> 
 <td>返回当前操作系统的默认语言。 （IE 支持）</td> 
 </tr> 
 <tr> 
 <td>userAgent </td> 
 <td>返回由客户机发送服务器的 user-agent 头部的值。</td> 
 </tr> 
 <tr> 
 <td>userLanguage </td> 
 <td>返回操作系统设定的自然语言。 （IE 和 Opera 支持）</td> 
 </tr> 
 <tr> 
 <td>plugins </td> 
 <td>返回包含客户端安装的所有插件的数组</td> 
 </tr> 
 </tbody> 
</table>

### Navigator 对象方法 ###

<table> 
 <tbody> 
 <tr> 
 <td>javaEnabled() </td> 
 <td>规定浏览器是否支持并启用了 Java。</td> 
 </tr> 
 <tr> 
 <td>taintEnabled() </td> 
 <td>规定浏览器是否启用数据污点 (data tainting)。</td> 
 </tr> 
 </tbody> 
</table>

## History 对象 ##

History 对象包含用户（在浏览器窗口中） 访问过的 URL

### History 对象属性 ###

<table> 
 <tbody> 
 <tr> 
 <td>length </td> 
 <td>返回浏览器历史列表中的 URL 数量。</td> 
 </tr> 
 </tbody> 
</table>

### History 对象方法 ###

<table> 
 <tbody> 
 <tr> 
 <td>back() </td> 
 <td>加载 history 列表中的前一个 URL。</td> 
 </tr> 
 <tr> 
 <td>forward() </td> 
 <td>加载 history 列表中的下一个 URL。</td> 
 </tr> 
 <tr> 
 <td>go() </td> 
 <td>加载 history 列表中的某个具体页面。</td> 
 </tr> 
 </tbody> 
</table>

## Location 对象 ##

Location 对象包含有关当前 URL 的信息。

### Location 对象属性 ###

<table> 
 <tbody> 
 <tr> 
 <td>hash </td> 
 <td>设置或返回从井号 (#) 开始的 URL（锚） 。</td> 
 </tr> 
 <tr> 
 <td>host </td> 
 <td>设置或返回主机名和当前 URL 的端口号。</td> 
 </tr> 
 <tr> 
 <td>hostname </td> 
 <td>设置或返回当前 URL 的主机名。</td> 
 </tr> 
 <tr> 
 <td>href </td> 
 <td>设置或返回完整的 URL。</td> 
 </tr> 
 <tr> 
 <td>pathname </td> 
 <td>设置或返回当前 URL 的路径部分。</td> 
 </tr> 
 <tr> 
 <td>port </td> 
 <td>设置或返回当前 URL 的端口号。</td> 
 </tr> 
 <tr> 
 <td>protocol </td> 
 <td>设置或返回当前 URL 的协议。</td> 
 </tr> 
 <tr> 
 <td>search </td> 
 <td>设置或返回从问号 (?) 开始的 URL（查询部分） 。</td> 
 </tr> 
 </tbody> 
</table>

### Location 对象方法 ###

<table> 
 <tbody> 
 <tr> 
 <td>assign() </td> 
 <td>加载新的文档。</td> 
 </tr> 
 <tr> 
 <td>reload(‘force’) </td> 
 <td>重新加载当前文档。 参数可选， 不填或填 false 则取浏览器缓存的文档</td> 
 </tr> 
 <tr> 
 <td>replace() </td> 
 <td>用新的文档替换当前文档。</td> 
 </tr> 
 </tbody> 
</table>

## Screen 对象 ##

Screen 对象包含有关客户端显示屏幕的信息。 每个 Window 对象的 screen 属性都引用一个 Screen 对象。 Screen 对象中存放着有关显示浏览器屏幕的信息。 JavaScript 程序将利用这些信息来优化它们的输出， 以达到用户的显示要求。 例如， 一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。 另外， JavaScript 序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

### Screen 对象属性 ###

<table> 
 <tbody> 
 <tr> 
 <td>availHeight </td> 
 <td>返回显示屏幕的高度 (除 Windows 任务栏之外)。</td> 
 </tr> 
 <tr> 
 <td>availWidth </td> 
 <td>返回显示屏幕的宽度 (除 Windows 任务栏之外)。</td> 
 </tr> 
 <tr> 
 <td>bufferDepth </td> 
 <td>设置或返回调色板的比特深度。 （仅 IE 支持）</td> 
 </tr> 
 </tbody> 
</table>

<table style="height:473px;"> 
 <tbody> 
 <tr> 
 <td>colorDepth </td> 
 <td>返回目标设备或缓冲器上的调色板的比特深度。</td> 
 </tr> 
 <tr> 
 <td>deviceXDPI </td> 
 <td>返回显示屏幕的每英寸水平点数。 （仅 IE 支持）</td> 
 </tr> 
 <tr> 
 <td>deviceYDPI </td> 
 <td>返回显示屏幕的每英寸垂直点数。 （仅 IE 支持）</td> 
 </tr> 
 <tr> 
 <td>fontSmoothingEnabled </td> 
 <td>返回用户是否在显示控制面板中启用了字体平滑。 （仅 IE 支持）</td> 
 </tr> 
 <tr> 
 <td>height </td> 
 <td>返回显示屏幕的高度。</td> 
 </tr> 
 <tr> 
 <td>logicalXDPI </td> 
 <td>返回显示屏幕每英寸的水平方向的常规点数。 （仅 IE 支持）</td> 
 </tr> 
 <tr> 
 <td>logicalYDPI </td> 
 <td>返回显示屏幕每英寸的垂直方向的常规点数。 （仅 IE 支持）</td> 
 </tr> 
 <tr> 
 <td>pixelDepth </td> 
 <td>返回显示屏幕的颜色分辨率（比特每像素） 。</td> 
 </tr> 
 <tr> 
 <td>updateInterval </td> 
 <td>设置或返回屏幕的刷新率。 （仅 IE11 以下支持）</td> 
 </tr> 
 <tr> 
 <td>width </td> 
 <td>返回显示器屏幕的宽度。</td> 
 </tr> 
 </tbody> 
</table>

[Center]: /images/20220524/b27e9c891f5043379d2aad38878ee99d.png