Java script Bom对象

骑猪看日落 2023-01-03 14:21 158阅读 0赞

# 1、浏览器环境，规格 #

JavaScript 语言最初是为 Web 浏览器创建的。此后，它已经发展成为一种具有多种用途和平台的语言。

平台可以是一个浏览器，一个 Web 服务器，或其他 **主机（host）**，甚至可以是一个“智能”咖啡机，如果它能运行 JavaScript 的话。它们每个都提供了特定于平台的功能。JavaScript 规范将其称为 **主机环境**。

主机环境提供了自己的对象和语言核心以外的函数。Web 浏览器提供了一种控制网页的方法。Node.JS 提供了服务器端功能，等等。

下面是 JavaScript 在浏览器中运行时的鸟瞰示意图：

![img][]![20210108191529516.gif][]

有一个叫做 `window` 的“根”对象。它有两个角色：

1.  首先，它是 JavaScript 代码的全局对象，如 [全局对象][Link 1] 一章所述。
2.  其次，它代表“浏览器窗口”，并提供了控制它的方法。

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

## [浏览器对象模型（BOM）][BOM] ##

浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

*  常见的BOM对象：
    
    1.window 代表整个浏览器窗口，window对象是BOM中的顶级对象。
    
    2.Navigator 表示浏览器的一些信息。
    
    3.Location 表示浏览器当前的地址信息。
    
    4.History 浏览器的历史记录信息。
    
    5.Screen 表示用户的屏幕信息。

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

## window ##

window对象的常用方法：

1.弹出系统对话框。

(1) alert()

(2) prompt()

(3) confirm()

2.打开窗口

window.open(url,target,param)

url :要打开的地址

target:新窗口的位置。 *blank,*self,\_parent(父框架下)

param:新窗口的一些设置。

name：新窗口的名字，可以为空

【注意】name需要写在target前面。

返回值：新窗口的句柄。

3.关闭窗口

window.close(); 关闭当前窗口

open返回值.close(); 关闭新窗口

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

## location ##

## Location 对象 ##

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

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

![Note][]**注意：** 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

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

## Location 对象属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-hash.html" rel="nofollow">hash</a></td> 
   <td>返回一个URL的锚部分</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-host.html" rel="nofollow">host</a></td> 
   <td>返回一个URL的主机名和端口</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-hostname.html" rel="nofollow">hostname</a></td> 
   <td>返回URL的主机名</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-href.html" rel="nofollow">href</a></td> 
   <td>返回完整的URL</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-pathname.html" rel="nofollow">pathname</a></td> 
   <td>返回的URL路径名。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-port.html" rel="nofollow">port</a></td> 
   <td>返回一个URL服务器使用的端口号</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-protocol.html" rel="nofollow">protocol</a></td> 
   <td>返回一个URL协议</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/prop-loc-search.html" rel="nofollow">search</a></td> 
   <td>返回一个URL的查询部分</td> 
  </tr> 
 </tbody> 
</table>

### 1、Location hash 属性 ###

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 \# 号开始的部分）。

语法

location.hash

实例

返回一个 URL 的主要部分。假设当前的 URL 是 http://www.baidu.com/test.htm＃PART2：

document.write(location.hash);

以上实例输出结果：

\#part2

### 2、Location host 属性 ###

### 定义和用法 ###

host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号。

语法

location.host

实例

返回当前URL的主机名和端口：

### 3.Location href 属性 ###

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

### 定义和用法 ###

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

语法

location.href

实例

返回完整的URL（当前页)：

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

### 4、Location search 属性 ###

定义和用法

search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

语法

location.search

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

实例

返回URL的查询部分。假设当前的URL就是http://www.百度/submit.htm?email=someone@ example.com：

以上实例输出结果:

?email=someone@example.com

## Location 对象方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-loc-assign.html" rel="nofollow">assign()</a></td> 
   <td>载入一个新的文档</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-loc-reload.html" rel="nofollow">reload()</a></td> 
   <td>重新载入当前文档</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/met-loc-replace.html" rel="nofollow">replace()</a></td> 
   <td>用新的文档替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

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

### 1.Location assign()方法 ###

assign()方法加载一个新的文档。

实例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>百度(baidu.com)</title>
    <script>
    function newDoc(){
    	window.location.assign("https://www.百度.com")
    }
    </script>
    </head>
    <body>
    
    <input type="button" value="载入新文档" onclick="newDoc()">
    
    </body>
    </html>

### 2.Location reload() 方法 ###

### 定义和用法 ###

reload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

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

语法

location.reload(*forceGet*)

参数

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>forceGet</em></td> 
   <td>Boolean</td> 
   <td>可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。</td> 
  </tr> 
 </tbody> 
</table>

### 3.Location replace() 方法 ###

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

### 定义和用法 ###

replace() 方法可用一个新文档取代当前文档。

语法

location.replace(*newURL*)

## 实例 ##

使用 replace() 方法来替换当前文档：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>(百度)</title>
    <script>
    function replaceDoc(){
        window.location.replace("https://www.baidu.com")
    }
    </script>
    </head>
    <body>
     
    <input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">
     
    </body>
    </html>

## history对象 ##

history:保存当前窗口的历史记录 ，里面包含了一些操作历史记录的属性和方法

【注意】不是浏览器中的历史记录

1.属性

length:返回历史记录的条数。

2.方法：

back():

语法：history.back();

作用:类似浏览器上面的后退键，回退到上一条历史记录中。

forward():

语法：history.forward();

作用:类似浏览器上面的前进键，前进到下一条历史记录中。

go(n):

语法：history.go(n); n表示整数

正整数：表示前进

0：刷新当前页面

负整数：表示后退

作用：跳转n条记录记录。

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

当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。

我们管上面隐藏的叫做 卷去的高度

左边隐藏的宽，叫做卷去的宽度。

document.documentElement.scrollTop

获取卷去的高度 使用时页面中必须要有DOCTYPE标签。

document.body.scrollTop

获取卷去的高度，使用时，页面中没有DOCTYPE标签。

兼容写法：

var scrollTop = document.body.scrollTop||document.documentElement.scrollTop

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

[img]: https://img-blog.csdnimg.cn/2021010817262454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[20210108191529516.gif]: /images/20221119/a6a1d5280eaf49d9972f25f22d668435.png
[Link 1]: https://zh.javascript.info/global-object
[BOM]: https://zh.javascript.info/browser-environment#liu-lan-qi-dui-xiang-mo-xing-bom
[Note]: /images/20221119/54cab7cecf5d46a7b018817048582cec.png