面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？

桃扇骨 2022-11-07 11:52 176阅读 0赞

![format_png][]

## 一、是什么 ##

`BOM` (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容可以看成`DOM`，整个浏览器可以看成`BOM`。区别如下：

![format_png 1][]

## 二、window ##

`Bom`的核心对象是`window`，它表示浏览器的一个实例

在浏览器中，`window`对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成`window`对象的属性和方法

var name = 'js每日一题';
    function lookName(){
      alert(this.name);
    }
    
    console.log(window.name);  //js每日一题
    lookName();                //js每日一题
    window.lookName();         //js每日一题

关于窗口控制方法如下：

*  `moveBy(x,y)`：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
 *  `moveTo(x,y)`：移动窗体左上角到相对于屏幕左上角的(x,y)点
 *  `resizeBy(w,h)`：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
 *  `resizeTo(w,h)`：把窗体宽度调整为w个像素，高度调整为h个像素
 *  `scrollTo(x,y)`：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
 *  `scrollBy(x,y)`：如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素

`window.open()` 既可以导航到一个特定的`url`，也可以打开一个新的浏览器窗口

如果 `window.open()` 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
    ==> <a href="http://www.vue3js.cn" target="topFrame"></a>

`window.open()` 会返回新窗口的引用，也就是新窗口的 `window` 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

`window.close()` 仅用于通过 `window.open()` 打开的窗口

新创建的 `window` 对象有一个 `opener` 属性，该属性指向打开他的原始窗口对象

## 三、location ##

`url`地址如下：

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

`location`属性描述如下：

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>例子</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>"#contents"</td> 
   <td>utl中#后面的字符，没有则返回空串</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>www.wrox.com:80</td> 
   <td>服务器名称和端口号</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>www.wrox.com</td> 
   <td>域名，不带端口号</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>http://www.wrox.com:80/WileyCDA/?q=javascript#contents</td> 
   <td>完整url</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>"/WileyCDA/"</td> 
   <td>服务器下面的文件路径</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>80</td> 
   <td>url的端口号，没有则为空</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>http:</td> 
   <td>使用的协议</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>?q=javascript</td> 
   <td>url的查询字符串，通常为？后面的内容</td> 
  </tr> 
 </tbody> 
</table>

除了 `hash`之外，只要修改`location`的一个属性，就会导致页面重新加载新`URL`

`location.reload()`，此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载，传递一个参数`true`即可

## 四、navigator ##

`navigator` 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂

下表列出了`navigator`对象接口定义的属性和方法：

![format_png 2][] ![format_png 3][]

## 五、screen ##

保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度

![format_png 4][]

## 六、history ##

`history`对象主要用来操作浏览器`URL`的历史记录，可以通过参数向前，向后，或者向指定`URL`跳转

常用的属性如下：

*  `history.go()`

接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转，

history.go('maixaofei.com')

当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面

history.go(3) //向前跳转三个记录
    history.go(-1) //向后跳转一个记录

*  `history.forward()`：向前跳转一个页面
 *  `history.back()`：向后跳转一个页面
 *  `history.length`：获取历史记录数

\--The End--

系列正在更新：21/33

*  [面试官：JavaScript中执行上下文和执行栈是什么？][JavaScript]  
    
 *  [面试官：JavaScript中的事件模型如何理解?][JavaScript 1]  
    
 *  [面试官：解释下什么是事件代理？应用场景？][Link 1]
 *  [面试官：Ajax 原理是什么？如何实现？][Ajax]
 *  [面试官：bind、call、apply 区别？如何实现一个bind?][bind_call_apply _bind]
 *  [面试官：说说你对正则表达式的理解？应用场景？][Link 2]
 *  [面试官：说说你对DOM的理解，常见的操作有哪些？][DOM]

篇副有限，扫下方二维码查看往期

![format_png 5][]

[format_png]: /images/20221023/da300a9a473f4a5a872e4d49ef21b314.png
[format_png 1]: /images/20221023/d093af0e79084436a12bdeb12ca389d8.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlNCOG44MFRtVzdUWXpnajlTcFcxTVNZSVF6bks3NFRGN01DaWNRVTJCYzdvQUdiSGliT1VDUXl4WlpIY3JjVmlhMWlhR2FYbDBoczU3TmljUS82NDA?x-oss-process=image/format,png
[format_png 3]: /images/20221023/57e823a6eb614489b4270ea97ce60ffd.png
[format_png 4]: /images/20221023/f36de0a59d684de88f494a809d7fbce7.png
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb1dcb67420bfb31f6560570b9b1dbcb3b46ad83bee8ec240ae1bfa8fbe9edfb18521576&idx=1&mid=2247485771&scene=21&sn=cb4eccd7996c95ca260c4a8d85e92113#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cbc1cb6742d7d877332259c1563d2dcc8b114c5b1d1ed8c08b71b47502053ae5cb341c8e&idx=1&mid=2247485847&scene=21&sn=6214e1eda9a0205c143e6c26ac4426ca#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb89cb67429f566962a6b4f76b953cbe1f59d35e8b338dbb6d1b42d2e0e647ca0fe47f5c&idx=2&mid=2247485919&scene=21&sn=15d93516f2118b13700a1e6e2ee1a56a#wechat_redirect
[Ajax]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c850cb674146578a56b5ef940658d17bc23c1e14fa5b07305e961bdaaa8f7f3c2164770a&idx=2&mid=2247485958&scene=21&sn=46e5ebf66441b96445670f8cf27f8130#wechat_redirect
[bind_call_apply _bind]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c845cb6741531028162a16324db2f792f8943977918b3bc0364858cb448af7432113c48d&idx=1&mid=2247485971&scene=21&sn=51fd5036dfe93700c1d6b850150073de#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c81acb67410c458664ea37ee0598e0e85783afdc771e92772c2e3f619d465002d8897bc7&idx=2&mid=2247486028&scene=21&sn=7efbff142f8966159b2fb1cdfee22f34#wechat_redirect
[DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8d0cb6741c63fa8c57b9b563b52ed2bf784c07980cbd832eb847cfd3f20b3f6d93f9735&idx=1&mid=2247486086&scene=21&sn=2a4320d54a65d71a5d5aab42dcde4e52#wechat_redirect
[format_png 5]: /images/20221023/eb5276008cf24797b30c94242afdfb61.png