前端学习之BOM（浏览器对象模型）

喜欢ヅ旅行 2023-02-20 06:42 78阅读 0赞

### 目录 ###

*  1. BOM概述
 *   *  1.1 定义
     *  1.2 BOM构成
 *  2. window 对象常见事件
 *   *  2.1 窗口加载事件
     *  2.2 调整窗口大小事件
 *  3. 定时器
 *   *  3.1 定时器
     *  3.2 setTimeout() 定时器
     *  3.3 停止 setTimeout() 定时器
     *  3.4 setInterval()定时器
     *  3.5 停止 setInterval() 定时器
     *  3.6 this
 *  4. JavaScript执行机制
 *   *  4.1 单线程
     *  4.2 同步和异步
     *  4.4 JS执行机制
 *  5. location对象
 *   *  5.1 定义
     *  5.2 URL
     *  5.3 location对象的属性
     *  5.4 location对象的方法
 *  6. navigator 对象
 *  7. history对象

# 1. BOM概述 #

## 1.1 定义 ##

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。  
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

**DOM、BOM 比较**

<table> 
 <thead> 
  <tr> 
   <th align="left">DOM</th> 
   <th align="left">BOM</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">文档对象模型</td> 
   <td align="left">浏览器对象模型</td> 
  </tr> 
  <tr> 
   <td align="left">把<strong>文档</strong>当做一个对象来看待</td> 
   <td align="left">把<strong>浏览器</strong>当做一个对象来看待</td> 
  </tr> 
  <tr> 
   <td align="left">顶级对象是 document</td> 
   <td align="left">顶级对象是 window</td> 
  </tr> 
  <tr> 
   <td align="left">操作页面元素</td> 
   <td align="left">浏览器窗口交互的一些对象</td> 
  </tr> 
  <tr> 
   <td align="left">是W3C 标准规范</td> 
   <td align="left">是浏览器厂商在各自浏览器上定义的，兼容性较差</td> 
  </tr> 
 </tbody> 
</table>

## 1.2 BOM构成 ##

window

document

location

navigation

screen

history

window 对象是浏览器的顶级对象，具有双重角色。

*  是JavaScript 访问浏览器窗口的一个接口；
 *  是一个全局对象。

定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。  
在调用的时候可以省略 window。

> 注意：window下有个特殊属性 window.name

# 2. window 对象常见事件 #

## 2.1 窗口加载事件 ##

window.onload = function(){ }
    // 或者
    window.addEventListener("load",function(){ });

> window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注：

1.  用 `window.onload` 可以把 js 代码写到页面元素的上方，因为 `onload`是等页面内容全部加载完毕，再去执行处理函数；
2.  以`window.onload` 这种传统注册事件方式，只能写一次，如果有多个会以最后一个`window.onload` 为准； 但使用 `addEventListener` 则无此限制。

document.addEventListener('DOMContentLoaded',function(){ })

`DOMContentLoaded` 事件触发时，仅DOM加载完成。不包括样式表，图片，flash等等。

> IE9 以上才支持；  
> 如页面图片较多, 从用户访问到onload触发可能需要较长的时间,则交互效果不能很好实现，影响用户体验，此时用 DOMContentLoaded 事件更合适。

## 2.2 调整窗口大小事件 ##

window.onresize = function(){ };
    // 或者
    window.addEventListener("resize",function(){ });

`window.onresize` 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注：

*  只要窗口大小发生像素变化，就会触发此事件；
 *  可利用此事件完成响应式布局，`window.innerWidth`当前屏幕的宽度。

# 3. 定时器 #

## 3.1 定时器 ##

window 对象提供的 2 个方法-定时器。

*  `setTimeout`();
 *  `setInterval`();

## 3.2 setTimeout() 定时器 ##

// 语法结构
    window.setTimeout(调用函数,[延迟的毫秒数]);

> `setTimeout`() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注：  
此调用函数可直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式；第3种不推荐。延迟数省略默认是 0，单位为毫秒。

## 3.3 停止 setTimeout() 定时器 ##

window.clearTimeout(timeoutID)   //timeoutID即定时器标识符。

`clearTimeout`()方法，取消了通过调用`setTimeout`()建立的定时器。

## 3.4 setInterval()定时器 ##

window.setInterval(回调函数, [间隔的毫秒数]);

`setInterval`() 方法，重复调用一个函数，每隔设定的间隔时间，就去调用一次回调函数。

> 第一次执行也是在间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

## 3.5 停止 setInterval() 定时器 ##

window.clearInterval(intervalID);  // 前面的window可省略

`clearInterval`()方法，取消了通过调用 `setInterval`()建立的定时器。

## 3.6 this ##

`this`的指向在函数定义的时候无法确定，只有函数执行的时候才能确定其具体指向，通常，this最终指向的是调用它的对象；

> **this指向**：
> 
> 1.  全局作用域或者普通函数中this指向全局对象window（注：定时器的this除外，其指向window）；
> 2.  方法调用中谁调用this，就指向谁；
> 3.  构造函数中this指向构造函数的实例。

# 4. JavaScript执行机制 #

## 4.1 单线程 ##

JavaScript 语言的一大特点就是单线程。  
它是为处理页面中用户的交互，以及操作 DOM 而诞生的。

> 如对某个 DOM 元素进行添加和删除操作。应该先进行添加，之后再删除，它们不能同时进行。

单线程，即所有任务需排队，前一任务结束，才执行后一任务。  
如果 JS 执行时间过长，会造成页面渲染不连贯，页面渲染加载阻塞。

## 4.2 同步和异步 ##

为了解决单线程导致的问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步

在做一件事的同时，还可以去处理其他事情。

*  同步任务  
    同步任务都在主线程上执行，形成一个执行栈。
 *  异步任务
    
    JS 异步通过回调函数实现。  
    异步任务主要类型:  
    1、普通事件：如 `click`、`resize` 等；  
    2、资源加载：如 `load`、`error` 等；  
    3、定时器：包括 `setInterval`、`setTimeout` 等。

> 异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）。

## 4.4 JS执行机制 ##

1.  先执行执行栈中的同步任务;
2.  异步任务（回调函数）放入任务队列；
3.  执行栈中的所有同步任务执行完毕，系统开始按次序读取任务队列中的异步任务，此时被读取的异步任务结束其等待状态，进入执行栈，开始执行。

> 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

# 5. location对象 #

## 5.1 定义 ##

window 对象给我们提供了一个 `location 属性`用于`获取或设置窗体的 URL`，并且可以用于`解析URL` 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 `location 对象`。

## 5.2 URL ##

**统一资源定位符** (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理。

/* URL 一般语法格式为：*/
    protocol://host[:port]/path/[?query]#fragment
    http://www.itcast.cn/index.html?name=andy&age=18#link

<table> 
 <thead> 
  <tr> 
   <th align="left">组成</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>protocol</code></td> 
   <td align="left">通信协议，常用的http、ftp、maito等</td> 
  </tr> 
  <tr> 
   <td align="left"><code>host</code></td> 
   <td align="left">主机（域名）如 <a href="http://www.webldm.com" rel="nofollow">www.webldm.com</a></td> 
  </tr> 
  <tr> 
   <td align="left"><code>port</code></td> 
   <td align="left">端口号 可选。省略时，使用方案的默认端口。如http的默认端口为80</td> 
  </tr> 
  <tr> 
   <td align="left"><code>path</code></td> 
   <td align="left">路径由0或多个“/”符号隔开的字符串组成，一般用来表示主机上的一个目录或文件地址</td> 
  </tr> 
  <tr> 
   <td align="left"><code>query</code></td> 
   <td align="left">参数 以键值对的形式，通过&amp;符号分隔开来</td> 
  </tr> 
  <tr> 
   <td align="left"><code>fragment</code></td> 
   <td align="left">片段 #后面内容 常见于链接 锚点</td> 
  </tr> 
 </tbody> 
</table>

## 5.3 location对象的属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">location对象属性</th> 
   <th align="left">返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>location.href</code></td> 
   <td align="left">获取或者设置整个URL</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.host</code></td> 
   <td align="left">返回主机（域名）<a href="http://www.webldm.com" rel="nofollow">www.webldm.com</a></td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.port</code></td> 
   <td align="left">返回端口号，如果未写，返回空字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.pathname</code></td> 
   <td align="left">返回路径</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.search</code></td> 
   <td align="left">返回参数</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.hash</code></td> 
   <td align="left">返回片段 #后面的内容，常见于链接 锚点</td> 
  </tr> 
 </tbody> 
</table>

> 重点：`href` 和`search`

## 5.4 location对象的方法 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">location对象方法</th> 
   <th align="left">返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>location.assign</code></td> 
   <td align="left">跟href一样，可以跳转页面（也称为重定向页面）</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.replace</code></td> 
   <td align="left">替换当前页面。因为不记录历史，所以不能后退页面</td> 
  </tr> 
  <tr> 
   <td align="left"><code>location.reload</code></td> 
   <td align="left">重新加载页面，相当于刷新按钮或<code>F5</code>。如果参数为<code>true</code>,相当于强制刷新<code>Ctrl+F5</code></td> 
  </tr> 
 </tbody> 
</table>

# 6. navigator 对象 #

`navigator`对象包含有关浏览器的信息，它有很多属性，最常用的是`userAgent`，该属性可以返回由客户机发送服务器的`user-agent`头部的值。

下面前端代码可以判断用户哪个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 
    window.location.href = ""; //手机
    } else { 
    window.location.href = ""; //电脑
    }

# 7. history对象 #

window 对象给我们提供了一个`history`对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

<table> 
 <thead> 
  <tr> 
   <th>history对象方法</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>back</code>()</td> 
   <td>后退功能</td> 
  </tr> 
  <tr> 
   <td><code>forward</code></td> 
   <td>前进功能</td> 
  </tr> 
  <tr> 
   <td><code>go</code>(参数)</td> 
   <td>前进后退功能，参数如果是1，前进1个页面；如果是-1，后退1个页面。</td> 
  </tr> 
 </tbody> 
</table>

> `history` 对象一般在实际开发中比较少用，但是会在一些 `OA 办公系统`中见到。如下图：

![在这里插入图片描述][20200624110337707.png]

[20200624110337707.png]: https://img-blog.csdnimg.cn/20200624110337707.png