BOM基础知识

发表于2017-02-16| 分类于前端

刚学JS的时候就买了一本《JavaScr权威指南》放在那里，当时就被这一千多页的厚度给唬住了。咬着牙看完了第一部分，也就是JavaScript语言核心；而JS的DOM部分，是在《DOM编程艺术》中学习的。关于BOM这一部分，却仅仅只是在工作中遇见了才去查资料，导致忽略了很多基础知识。前几天入手了Kindle，看的第一本书就是《JavaScr权威指南》，阅读电子书的一个好处就是能够在不知不觉中把这么厚的书给消灭掉，缺点是不容易折回去反复阅读。因此，总归是要做点笔记的。

BOM常规的叫法是"浏览器对象模型"，在解释他跟DOM（文档对象模型）的区别之前，我们需要了解他们的老大，也就是Window对象。

1. Window对象

Window对象表示一个浏览器窗口，它是整个浏览器Javascript的全局对象。换句话说，我们在浏览器中使用JS，就必须依赖当前浏览器所定义的Window对象的特性和提供的接口（这就是不同浏览器存在JS兼容性的原因）。

我们常使用的定时器(setInterval，setTimeout)和对话框(alert，confirm，prompt)都是Window对象的方法。由于在当前窗口Window对象是全局对象，因此这些方法均可以作为全局函数进行调用。 Window对象有一个最重要的属性document，这个属性表示窗口中的文档对象，也就是我们所熟悉的DOM，通过DOM，我们可以访问文档对象中的节点并进行相关操作，DOM对象实在是太重要了，以至于JS编程的焦点基本放在了这上面。此外，Window对象还定义了一些其他的属性，用于提供访问浏览器组件的接口，这些属性组成了本文的主角BOM，主要包括：

location位置对象
history历史纪录对象
navigator浏览器对象
screen显示器对象

下面主要整理关于这些对象的基础知识，随便打开一个控制台输入console.dir(属性名)即可查看相关对象的信息。

2. location

window.location引用Location位置对象，这里的位置不是地理位置而是浏览器地址栏的信息，即当前窗口所显示文档的URL地址。

通过Location对象的相关属性，我们可以获取网页的路径pathname，协议protocol，端口号port和GET参数search等信息。而URL位置对象最主要的用途就是跳转到新页面了，可以使用assign()方法或者replace()方法来进行页面跳转，他们的区别在于：

replace方法会在载入新文档之前从浏览历史中把当前页面删除
assign方法会直接载入一个新的文档，如果在新文档点击了后退按钮把浏览器带回原始文档，某些时候原始文档的相同脚本文件会再次载入新文档（我们就再也回不去了~~）。

此外，还可以使用reload()方法来刷新当前页面。

2.1. href

而最常用的属性应该是href了，这个属性包含了当前页面URL的完整文本，而通过对该属性进行重新赋值，我们也可以直接使浏览器跳转到新的页面（并且这种做法更为传统）。

// 同理，由于是window对象的属性，因此可以直接作为全局变量使用

// 绝对路径
location.href = 'https://www.google.com.hk';

// 相对路径，会根据当前URL进行解析
location.href = '1.html'

比较有意思的是,location对象的toString方法也会返回href的值，也就是说，在上面为href赋值的时候，可以使用location来代替location.href

console.log(location == location.href); // true

location = '1.html'; // 隐式调用toStirng()并执行跳转

另外，纯粹的片段标识符(#)是也是相对URL的一种类型，如果改变的是片段标识符，不会让浏览器载入新文档（本来就不代表新文档），而是让页面滚动到文档的对应位置，哈没错，这就是<a>的锚点：使用id属性作锚点标记，通过向URL插入片段标识符使页面滚动到锚点处。如果没有任何标记（只有一个孤零零的#号），那么会返回到文档开始处。

3. history

history用来管理浏览器的浏览历史，哈这是一个关于保护个人隐私的问题，我们可以通过history.length来访问历史纪录中的元素数量，却不能访问已保存的URL。我们主要使用history来模拟浏览器工具栏中的前进，后退和刷新按钮。

history.back(); // 后退
history.forward(); // 前进

而更通用的方法是go()，通过传入的参数（一个整数数字），我们可以在历史列表中向前（正参数）或向后（负参数）跳过任意条历史纪录，甚至可以传入0使页面刷新。

需要注意的是，如果当前页面包含多个子窗口iframe，则子窗口的浏览记录会按时间顺序穿插在主窗口的历史纪录中，这导致如果在主窗口调用hsitory.back()，子窗口往回跳转而主窗口的页面保持不变

HTML5还引进了两个新的方法pushState()和replaceState()，这两个方法允许我们逐条地添加和修改历史记录条目，这两个方法可以干很多事情，先把他们放一放...

4. 浏览器

4.1. Navigator

浏览器对象包含了当前页面所运行的浏览器厂商和版本信息，很早之前的“浏览器嗅探”，就是根据浏览器的版本做不同的兼容处理（之前那个学校的网站项目我还用过，万恶的IE~）。navigator对象并不是经常用到，主要属性有浏览器全称appName，厂商和版本appVersuib，操作系统platform。我打算在博客中使用这些信息作为评论的用户信息。

4.2. screen

屏幕对象主要包括了浏览器运行的屏幕窗口的显示大小和可用的颜色数量等信息。屏幕的尺寸宽screen.width和高screen.height可以用来检测当前设备的分辨率信息，从而作为某些样式和动画的依据（比如滚动加载，rem布局等）。

5. 小结

这里简单将工作中遇见的一些BOM相关知识进行整合，比较浅陋。另外HTML5提供了一系列新的接口，比如localStorage，getLocation等，也需要进一步学习，后面再回来填坑吧。