JavaScript高程笔记 -- BOM

1. BOM

浏览器对象模型（BOM，Browser Object Model），是使用 JavaScript 开发 Web 应用程序的核心。

是实现 Web 开发与浏览器之间互相操作的基础。

BOM主要包含五个基础对象：

1. window：表示浏览器实例
2. location：加载文档的信息和常用导航功能实例
3. navigator：客户端标识和信息的对象实例
4. screen：客户端显示器信息
5. history：当前窗口建立以来的导航历史记录

1.1 window 对象

BOM 的核心对象，有两个身份：ES中的全局作用域和浏览器窗口的JavaScript接口。

1.1.1 global 全局作用域

所有使用 var 声明的变量和函数都会成为 window 对象的属性和方法。并且浏览器API 和 多数构造函数 都会以 window 对象的属性。

1.1.2 窗口关系

window 对象的 top 属性始终指向最外层的窗口，及浏览器窗口本身。

window 对象的 parent 属性始终指向当前窗口的父窗口，如果当前窗口就是最外层窗口，则 top 等于 parent

window 对象的 self 属性始终指向自身。

1.1.3 窗口属性

包含窗口位置、大小、像素比等。

window.screenLeft // 窗口相对于屏幕左侧的距离, number (单位 px)
window.screenTop  // 窗口相对于屏幕顶部的距离, number (单位 px)

window.moveTo(x, y) // 移动到 (x, y) 坐标对应的新位置
window.moveBy(x, y) // 相对当前位置在两个方向上分别移动 x/y 个像素的距离

浏览器窗口大小不好确认，但是可以用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 来确认可视窗口的大小。

调整窗口大小可以使用 resizeTo() 和 resizeBy() 两个方法。

// 缩放到 100×100
window.resizeTo(100, 100);
// 缩放到 200×150
window.resizeBy(100, 50);
// 缩放到 300×300
window.resizeTo(300, 300);

1.1.4 视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。

度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.scrollX 和 window.pageYoffset/window.scrollY。

可以使用 scroll() 、scrollTo() 和 scrollBy() 方法滚动页面。

// 相对于当前视口向下滚动 100 像素
window.scrollBy(0, 100);
// 相对于当前视口向右滚动 40 像素
window.scrollBy(40, 0);
// 滚动到页面左上角
window.scrollTo(0, 0);

这几个方法也都接收一个 ScrollToOptions 字典，除了提供偏移值，还可以通过 behavior 属性告诉浏览器是否平滑滚动。

// 正常滚动
window.scrollTo({
    left: 100,
    top: 100,
    behavior: 'auto'
});
// 平滑滚动
window.scrollTo({
    left: 100,
    top: 100,
    behavior: 'smooth'
});

1.1.5 导航与跳转

window.open() 方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。

1.1.6 定时器

setTimeout() 超时任务：等待一段时间之后再执行内部的代码，会返回一个超时ID

setInterval() 定时任务：每隔一段时间执行一次内部的代码，会返回一个定时ID

clearTimeout() 清除指定/所有超时任务。

clearInterval() 清除指定/所有定时任务。

setTimeout() 和 setInterval() 都接收两个参数：要执行的代码（函数）和等待 / 间隔时间（毫秒）。

setTimeout 可以不记录超时ID，因为它会在满足条件（执行定义时传入的函数时）自动停止，再次定义时会重新定义一个超时任务。

let num = 0;
let max = 10;
let incrementNumber = function() {
    num++;
    // 如果还没有达到最大值，再设置一个超时任务
    if (num < max) {
    	setTimeout(incrementNumber, 500);
    } else {
    	alert("Done");
    }
}
setTimeout(incrementNumber, 500);

setInterval() 会在被销毁之前一直按照定义的间隔时间一直执行，而不会在意定义时传入的函数的执行状态。

1.2 location 对象

location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。

解析 ：http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

地址操作

修改浏览器地址可以通过四种方式来修改：

1. location.assign()
2. location.replace()
3. location.href = newLocation
4. window.location = newLocation

其中 location.href 和 window.location 都会在内部显式调用 location.assign() 方法，并且向浏览器历史记录中增加一条记录。点击浏览器 "后退" 按钮可以回到上页。

而 location.replace() 可以直接修改地址重载页面，而不会向历史记录中插入数据，也无法返回上页。

另外 location 还提供了一个 reload() 方法，用来重载当前页面

1.3 navigator 对象

客服端标识浏览器的标准，主要用来记录和检测浏览器与设备的主要信息，也可以让脚本注册和查询自己的一些活动（插件）。

1.4 screen 对象

单纯的保存客服端能力的对象。包含以下属性：

1.5 history 对象

浏览器导航历史记录及相关操作的对象。

1.5.1 导航

history 对象提供了三个方法和一个属性来查看和操作历史记录（当前窗口）。

// 跳转到最近的 xxx 页面
history.go("xxx");
ry.back();

// 前进一页
history.forward()

go() 方法会接收一个字符串或者整数参数，传入整数时，正整数表示前进多少页，负整数表示后退多少页；传入字符串时，会匹配含有该字符串的最近的一条历史记录对应的网址，如果没有找到则不会发生变化。

history 提供一个 length 属性，可以用来查看当前窗口的历史记录数量。

1.5.2 历史状态管理

1. hashchange 事件：页面 URL 的散列变化时被触发
2. history.pushState() 方法：接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL
3. popstate 事件（在 window 对象上）：后退时触发
4. history.state 属性：当前的历史记录状态
5. history.replaceState() 方法：接收与 pushState() 一样的前两个参数来更新状态