JavaScript中的BOM

1.认识BOM

 BOM：浏览器对象模型（Browser Object Model）

• 由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；
• 比如navigator、location、history

BOM主要包括以下对象模型

• window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
• location：浏览器连接到的对象的位置（URL）；
• history：操作浏览器的历史；
• navigator：用户代理（浏览器）的状态和标识（很少使用）；
• screen：屏幕窗口信息（很少使用）

2.window对象

window中常见的属性

//浏览器高度

console.log(window.outerHeight)
console.log(window.innerHeight)

console.log(window.screenX)
console.log(window.screenY)

//监听scroll

console.log(window.scrollX)
console.log(window.scrollY)

window中常见的方法

在使用close方法的时候，只能关闭由open打开的页面

window常见的事件

window.onfocus = function() {
        console.log("窗口获取到焦点");
      }
      window.onblur = function() {
        console.log("窗口失去焦点");
      }

3.location对象

 location对象用于表示window上当前链接到的url信息

location常见的属性

 href : 当前window对应的超链接URL, 整个URL；

 protocol : 当前的协议；

 host : 主机地址；

 hostname : 主机地址(不带端口)；

 port : 端口；

 pathname : 路径；

 search : 查询字符串；

 hash : 哈希值；

location常见的方法

 assign ：赋值一个新的URL，并且跳转到该URL中；

 replace ：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）；

 reload ：重新加载页面，可以传入一个Boolean类型；

location.assgin("http://www.com")
location.replace("http://www.com")
location.reload()

 4.URLSearchParams

URLSearchParams定义了一些实用的方法来处理URL的查询字符串

• 可以将一个字符串转化成URLSearchParams类型；
• 也可以将一个URLSearchParams类型转成字符串；

var urlsearch = new URLSearchParams("name=sss&age=18&height=1.2")
console.log(urlsearch.get("name")) //sss
console.log(urlsearch.toString()) //name=sss&age=18&height=1.2

◼ URLSearchParams常见的方法有如下：

 get ：获取搜索参数的值；

 set ：设置一个搜索参数和值；

 append ：追加一个搜索参数和值；

 has ：判断是否有某个搜索参数；

◼ 中文会使用encodeURIComponent和decodeURIComponent进行编码和解码 

5.history对象

history对象允许我们访问浏览器曾经的会话历史记录

history属性

 length ：会话中的记录条数；

 state ：当前保留的状态值；

history方法

 back() ：返回上一页，等价于history.go(-1)；

 forward() ：前进下一页，等价于history.go(1)；

 go() ：加载历史中的某一页；

 pushState() ：打开一个指定的地址；

 replaceState() ：打开一个新的地址，并且使用replace；