javascript（JS） 0基础快速入门 （八）（BOM浏览器对象）

BOM

浏览器对象（Browser Object Model ）

BOM可以使我们通过JS来操作浏览器

在BOM为我们提供了一组对象，用来完成对浏览器的操作

BOM对象的 五个主要对象

• window

  ​ 代表的时整个浏览器窗口，同时也是window也是网页中的全局对象

• document

  ​ 文档对象

• Navigator

  ​ 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器

• Location

  ​ 代表当前浏览器的地址栏信息

• History

  ​ 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

  ​ 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页

• Screen

  ​ 代表用户的屏幕信息， 通过该对象可以获取到用户的显示器的相关信息

window 对象

window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。

常用方法：

alert(提示信息)

confirm(确认信息)

prompt(弹出输入框)

location 对象

Location接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。

主要属性：

属性：	作用
Location.href	包含整个URL的一个DOM String (http://127.0.0.1:5500/1.html)
Location.host	包含了域名的一个DOM String，可能在该串最后带有一个":"并跟上URL的端口号。 127.0.0.1:5500
Location.search	包含URL参数的一个DOM String，开头有一个“?”。
Location.pathname	包含URL中路径部分的一个DOM String，开头有一个“/"。 /1.html

主要方法：

Location.replace()

用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History 中，这意味着用户将不能用后退按钮转到该页面。

Location.assign()

加载给定URL的内容资源到这个Location对象所关联的对象上。

// 跳转到 Location.reload() 这篇文章
	document.location.assign('https://www.baidu.com');

Location.toString()

返回一个DOM String，包含整个URL。

但是用它是不能够修改Location的值的。

示例：

var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

History 对象

History.back()

在浏览器历史记录里前往上一页

History.forward()

在浏览器历史记录里前往下一页

History.go()

通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面

History.pushState()

按指定的名称和URL（如果提供该参数）将数据push进会话历史栈；

History.replaceState()

按指定的数据，名称和URL(如果提供该参数)，更新替换历史栈上最新的入口

注意：

这些BOM对象在浏览器都是window对象的属性保存的

可以通过过window对象来使用，也可以直接使用