Javascript--BOM相关的基本概念

心已赠人 2024-04-08 12:18 52阅读 0赞

**目录**

BOM

window 对象的常用属性

window 对象的常用事件

history 对象的常用方法

location 对象的常用属性和方法

navigator 对象的常用属性

--------------------

###  ###

## BOM ##

虽然 ECMAScript 把浏览器对象模型（BOM，Browser Object Model）描述为JavaScript 的核心，但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>BOM</td> 
   <td>浏览器对象模型（Browser Object Model），是 js 与浏览器窗口交互的接口</td> 
  </tr> 
  <tr> 
   <td>window</td> 
   <td>window 对象表示浏览器中打开的窗口，注意事项：<br> 1、这个窗口中包含 DOM 结构，window.document 属性就表示 document 对象<br> 2、全局变量会成为 window 对象的属性<br> 3、内置函数普遍是 window 的方法，如：alert(),confirm(),prompt()等方法</td> 
  </tr> 
  <tr> 
   <td>history</td> 
   <td>history 对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可通过 window.history 属性对其进行访问</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>location对象包含有关当前URL的信息，是window对象的一个部分，可通过window.location属性来访问。</td> 
  </tr> 
  <tr> 
   <td>navigator</td> 
   <td>navigator对象含有浏览器的信息，是window对象的一个部分，可通过window.navigator属性访问</td> 
  </tr> 
 </tbody> 
</table>

###  ###

### window 对象的常用属性 ###

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>属性</td> 
  </tr> 
  <tr> 
   <td>innerHeight</td> 
   <td>返回浏览器窗口的内容区域的高度，包含水平滚动条的高度</td> 
  </tr> 
  <tr> 
   <td>innerWidth</td> 
   <td>返回浏览器窗口的内容区域的宽度，包含垂直滚动条的宽度</td> 
  </tr> 
  <tr> 
   <td>document.documentElement.clientWidth</td> 
   <td>返回浏览器窗口的内容区域的宽度，不包含滚动条</td> 
  </tr> 
  <tr> 
   <td>scrollY</td> 
   <td>返回文档当前垂直滚动的距离</td> 
  </tr> 
  <tr> 
   <td>document.documentElement.scrollTop</td> 
   <td>要获取当前页面的滚动条纵坐标位置</td> 
  </tr> 
 </tbody> 
</table>

### window 对象的常用事件 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onresize</td> 
   <td>监听窗口改变大小事件</td> 
  </tr> 
  <tr> 
   <td>onscroll</td> 
   <td>监听窗口滚动事件</td> 
  </tr> 
 </tbody> 
</table>

### history 对象的常用方法 ###

该对象保存着用户上网的历史记录。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>back()</td> 
   <td>表示回退到浏览器历史记录里的上一页，等同于点击浏览器回退按钮</td> 
  </tr> 
  <tr> 
   <td>go(-1)</td> 
   <td>与history作用一样，加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。</td> 
  </tr> 
  <tr> 
   <td> <p>forward()</p> </td> 
   <td>加载 history 列表中的下一个 URL</td> 
  </tr> 
  <tr> 
   <td> <p>length</p> </td> 
   <td>返回历史列表中的网址数 注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。</td> 
  </tr> 
 </tbody> 
</table>

###  ###

### location 对象的常用属性和方法 ###

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用location对象也可以。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或返回完整的ULR地址</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>设置或返回(?)开始的URL(查询部分)</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>返回服务器名称和端口号</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>返回不带端口号的服务器名称</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>返回URL的目录和文件名</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>返回URL中指定的端口号</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>返回页面使用的协议</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新加载当前页面。参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。</td> 
  </tr> 
  <tr> 
   <td>assign()</td> 
   <td>传递一个URL参数，打开新的URL，并在浏览记录中生成一天记录</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>参数为URL，结果会导致浏览器位置改变，但不会再历史记录中生成新的记录。</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
    <button>跳转页面</button>
    <button>替换页面</button>
    <button>刷新页面</button>
    </body>
    </html>
    <script>
    
    console.log(window.location === document.location); //true
      console.log(location === document.location);	//true
      console.log(location === window.location);	//true
    
    
    
      var btn = document.getElementsByTagName('button');
      btn[0].onclick = function () {
        location.assign('./test2.html')
      }
      btn[1].onclick = function () {
        location.replace('./test2.html')
      }
      btn[2].onclick = function () {
        location.reload()
      }
    </script>

### navigator 对象的常用属性 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>appName</td> 
   <td>返回浏览器官网名称</td> 
  </tr> 
  <tr> 
   <td>appVersion</td> 
   <td>返回浏览器版本</td> 
  </tr> 
  <tr> 
   <td>userAgent</td> 
   <td>返回浏览器的用户代理信息</td> 
  </tr> 
  <tr> 
   <td>platform</td> 
   <td>返回用户操作系统</td> 
  </tr> 
 </tbody> 
</table>