【js】BOM基础

BOM

浏览器对象模型 - Browser Object Model
Web浏览器暴露的所有对象组成的表示模型，当浏览器分析文档时，它将创建一个对象集合，定义文档并详细说明它如何显示。

浏览器创建的对象称为文档对象，它是浏览器使用的更大的对象集合的一部分，此浏览器对象集合统称为浏览器对象模型或BOM

window
location
navigator
screen
history

1 window对象

顶层对象 - 核心，其他对象都是该对象的子对象
双重身份

被复用为ECMAScript中的Global对象
浏览器窗口的JavaScript接口

Global
窗口
定时器
系统对话框

1.1 Global作用域

通过var声明的所有全局变量和函数都会成为window对象的属性和方法

var a = 10;
var showA = () => { console.log(this.a); }
console.log(window.a); //10
window.showA() //10

let b = 20;
let showB = () => { console.log(b); }
console.log(window.b); //undefined
window.showB() //Uncaught TypeError

1.2 窗口

窗口关系
窗口位置和像素比
窗口大小
视口位置
导航与新窗口

1.2.1 窗口关系

top：顶层窗口，指向最外层窗口的window
parent：父窗口window

self：当前窗口，当前window

//单窗口
window === top //true
window === parent //true
window === self //true

1.2.2 窗口位置和像素比

screenLeft：窗口相对于屏幕左侧的位置
screenTop：相对于顶部的位置
moveTo(x,y)：移动至绝对坐标
moveBy(x,y)：相对当前位置的偏移
```
//半屏
console.log(screenLeft);//953
console.log(screenTop); //30
```
有与moveTo()与moveBy()仅在IE上有效果，不再举例
devicePixelRatio：物理像素和逻辑像素的缩放系数

1.2.3 窗口大小

innerWidth：窗口内页面视口宽度
innerHeight：窗口内页面视口高度
document.documentElement.clientWidth/clientHeight也表示视口大小
outerWidth：窗口宽度

outerHeight：窗口高度

console.log(innerHeight);//364
console.log(outerHeight);//1057

resizeTo(x,y)：设置窗口绝对大小
resizeBy(x,y)：相对原尺寸进行方法与缩小
同样仅在IE上有效果，其他浏览器支持，但可能处于保护模式

1.2.4 视口大小

上面介绍了两种获取可视区宽高的方式
当页面宽高较大，可视区发生滚动时，获取当前可视区的位置

pageXOffset/scrollX：可视区相对页面水平滚动的距离 - 前者已弃用

pageYOffet/scrollY：垂直滚动的距离 - 前者已弃用

console.log(pageXOffset);//200
console.log(scrollX);//200
console.log(pageYOffset === scrollY);//true

scroll(x,y)：滚动至绝对坐标
scrollTo(x,y)：滚动至绝对坐标

scrollBy(x,y)：相对当前位置的偏移量

参数可以是一个选项对象，对滚动行为进行具体描述

//平滑滚动到顶部
scrollTo({
  left: 0,
  top: 0,
  behavior: 'smooth'
})
//向下滚动一页
scrollBy({
  left: 0,
  top: innerHeight,
  behavior: 'smooth'
})

behavior：

smooth：平滑滚动
instant：瞬间滚动
auto：instant

1.2.5 导航与新窗口

open(url,name,fetures)：用指定名称将指定的资源加载到浏览器上下文，无名称打开新窗口
name
- 打开指定名称的窗口
- '_self','_blank'
- '_parent'在parent框架打开，无则等价于'_self'
- '_top'进入顶层浏览上下文，无则等价于'_self'
fetures
- height,width,top,left：新窗口的大小与位置
- fullscreen：是否窗口最大化 IE
- location：是否显示地址栏
- Menubar：是否显示菜单栏
- toolbar：是否显示工具栏
- status：是否显示状态栏
- resizable：是否可以拖动改变新窗口大小
- scrollbars：是否在内容过长时滚动
布尔类型默认为no
open返回当前窗口的window，opener返回打开该窗口的window

close()：关闭窗口

//在新窗口指点大小与位置打开资源
const newWin = open(
  'http://www.bilibili.com',
  '_blank',
  'height=400,width=400,top=0,left=0,resizable=yes'
)
//关闭窗口
newWin.close()
newWin.closed //true

加载阶段的open()会被浏览器拦截，只允许用户手动添加窗口

1.2 定时器

setTimeout(func,delay,arg1...)：在指定时间后执行
参数：arg为func回调的默认参数
返回值，返回定时器ID

//2000ms后执行
let timer = setTimeout((...a) => {
    console.log(a);
}, 2000, 'a', 'b');
//关闭定时器
clearTimeout(timer)

setInterval(func,delay,arg1...)：每隔一段时间执行一次
参数与返回值与setTimeout相同，通过clearInterval取消

间隔时间：每隔一段时间添加一个任务到执行队列中，浏览器不管何时开始要执行多久，在下一个时间间隔会再添加一个任务到执行队列，不管前面的任务是否执行
这意味着可能会出现定时器添加了多个任务，最终同时执行没有间隔的效果

1.3 系统对话框

alert()：警告窗
confirm()：确认窗 - 返回布尔值
prompt()：提示对话框 - 返回字符串或null
find()：查找页面内容 - 返回布尔值
print()：显示打印对话框

一般情况下我们会自己写对话框，在样式与功能上更完善

2 location对象

window与document公有属性：提供当前窗口中加载文档的信息，以及通常的导航功能

window.location === document.location //true

href：完整URL
origin：URL源地址。只读
protocol：协议名
host：服务器名 + 端口号
hostnamr：服务器名
port：端口号
pathname：路径或文件名
hash：散列值，#后的值
search：query参数
username：域名前指定的用户名
password：域名前指定的密码

2.1 查询字符串

location.search()返回query参数，需要对其拆分保存

//使用字符串拆分与遍历的方式
function getQueryStringArgs() {
    let qs = location.search.length > 0 ? location.search.slice(1) : '';
    const args = {};
    for (const item of qs.split('&').map(i => i.split('='))) {
        let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}

decodeURIComponet函数为解码函数，将编码的URI的转义序列转换为原字符

function getQueryStringArgs() {
    let qs = new URLSearchParams(location.search)
    const args = {};
    for (const item of qs) {
        let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}
console.log(getQueryStringArgs());

new URLSearchParams(query) 返回一个可迭代对象，以数据形式存放key-val
实例对象可以使用get() set() delete()方法，相当于处理后返回一个map结构

2.2 location上的方法

assign(url)：修改浏览器地址，location的其他地址属性会重新解析
replace(url)：替换浏览器地址
replace与assign不同的是，replace后原页面不会保存到会话历史中，相当于直接替换
reload()：重新加载页面

3 navigator对象

用户代理的状态和标识，允许脚本查询它和注册自己进行一些活动
属性

connection：设备网络连接信息。只读
onLine：是否联网
deviceMemory：设备内存
hardwareConcurrency：逻辑处理器核心数，浏览器可并行最大工作线程数量
maxTouchPoints：最大关联触点数量
language[s]：浏览器主语言与偏好语言数组
mediaDevices：可用媒体设备
plugins：插件数组
userAgent：用户代理字符串
webdriver：浏览器是否被自动程序控制
storage：暴露相关API
serviceWorker：暴露相关API
permissions：暴露相关API
mediaCapabilities：暴露相关API
locks：暴露相关API
credentials：暴露相关API
geolocation：暴露相关API - 当前设备地理位置

方法

registerProtocolHandler(scheme, url)
web站点为自身注册协议
requestMediaKeySystemAccess(keySystem,supportedConfigurations)
返回一个promise，访问特定媒体的密钥系统，该系统又可创建解密媒体流的密钥
sendBeacon(url, data)
向指定地址异步发送数据，只是简单字符串则向本地址与字符串拼接后的地址发送数据，成功返回true
share(data) data:url text title files
返回promise，返回当前平台的共享机制，数据格式不正确promise为拒绝状态
vibrate(pattern)
触发设备震动，不支持返回false
pattern为单个震动或震动数组

4 screen对象

浏览器窗口外面的客户端显示器的信息

width：屏幕宽度
height：高度
availHeight：屏幕高度 - 系统组件高度
availWidth：屏幕宽度 - 系统组件宽度
availLeft：无系统组件占用的屏幕最左侧像素
availTop：最顶部
colorDepth：屏幕颜色的位数
pixelDepth：屏幕位深
orientation：屏幕朝向

5 history对象

导航历史记录

5.1 基本属性与方法

length：历史记录数量
back()：回退一步
forward()：前进一步
go(n)：前进/后退|n|步，或指定地址，导航至最近的该地址

5.2 历史状态管理

pushState(state,title,url)：向历史中添加一个状态
replaceState(state,title,url)：替换当前历史记录

当pushState()时会触发popstate事件，它的事件对象的state属性包含pushState的第一个state参数

pushState()创建的"假"URL背后都对应这服务器上一个真实的物理URL，否则单击刷新会导致404错误
所有单页应用程序框架都必须通过服务器或客户端的某些配置解决这个问题