BOM 常用对象类型笔记
浏览器对象模型 BOM（Browser Object Model）允许 JavaScript 直接与浏览器进行交互，在 JavaScript 中定义了 6 种重要的对象：
- Window 对象
- Document 对象
- Location 对象
- Navigation 对象
- Screen 对象
- History 对象
其中，其他所有对象都是 Window 对象的一部分。
Window 对象
Window 对象是 BOM 的核心，表示当前的浏览器窗口。主要提供调整窗口的尺寸和位置、打开新窗口、系统提示框、状态栏控制、定时操作等功能。具体请参考表格。
使用 window 对象的属性和方法不需要特别的指明。如：
1 | alert("Alert."); |
两种调用方式等价，第二种是第一种调用的完整写法。
Window 对象的属性表
| 属性名 | 作用 |
|---|---|
| name | 指定窗口的名称 |
| parent | 当前窗口（框架）的父窗口，使用它返回对象的方法和属性 |
| opener | 返回产生当前窗口的窗口对象，使用它返回对象的方法和属性 |
| top | 代表主窗口，是最顶层的窗口，也是所有其他窗口的父窗口。可通过该对象访问当前窗口的方法和属性 |
| self | 返回当前窗口的一个对象，可通过该对象访问当前窗口的方法和属性 |
| defaultstatus | 返回或设置将在浏览器状态栏中显示的默认内容 |
| status | 返回或设置将在浏览器状态栏中显示的指定内容 |
Window 对象的方法表
| 方法名 | 作用 |
|---|---|
| alert() | 显示一个警示对话框，包含一条信息和一个确定按钮 |
| confirm() | 显示一个确认对话框 |
| prompt() | 显示一个提示对话框，提示用户输入数据 |
| open() | 打开一个已存在的窗口，或者创建一个新窗口，并在该窗口中加载一个文档 |
| close() | 关闭一个打开的窗口 |
| navigate() | 在当前窗口中显示指定网页 |
| setTimeout() | 设置一个定时器，在经过指定的时间间隔后调用一个函数 |
| clearTimeout() | 给指定的计时器复位 |
| focus() | 使一个Window对象得到当前焦点 |
| blur() | 使一个Window对象失去当前焦点 |
Window 对象的事件表
| 事件 | 说明 |
|---|---|
| onload | HTML文件载入浏览器时发生 |
| onunload | HTML文件从浏览器删除时发生 |
| onfocus | 窗口获得焦点时发生 |
| onblur | 窗口失去焦点时发生 |
| onhelp | 用户按下F1键时发生 |
| onresize | 用户调整窗口大小时发生 |
| onscroll | 用户滚动窗口时发生 |
| onerror | 载入HTML文件出错时发生 |
Document 对象
当浏览器载入 HTML 文档，它就会成为 Document 对象，载入之后的 Document 对象是 HTML 文档的根节点。
Document 对象的存在让我们可以使用 JavaScript 访问并操作 HTML 页面中的所有元素。
| 属性 / 方法 | 描述 |
|---|---|
| document.activeElement | 返回当前获取焦点元素 |
| document.addEventListener() | 向文档添加句柄 |
| document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
| document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
| document.baseURI | 返回文档的绝对基础 URI |
| document.body | 返回文档的body元素 |
| document.close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
| document.createAttribute() | 创建一个属性节点 |
| document.createComment() | createComment() 方法可创建注释节点。 |
| document.createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象。 |
| document.createElement() | 创建元素节点。 |
| document.createTextNode() | 创建文本节点。 |
| document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
| document.documentElement | 返回文档的根节点 |
| document.documentMode | 返回用于通过浏览器渲染文档的模式 |
| document.documentURI | 设置或返回文档的位置 |
| document.domain | 返回当前文档的域名。 |
| document.domConfig | 已废弃。返回 normalizeDocument() 被调用时所使用的配置。 |
| document.embeds | 返回文档中所有嵌入的内容（embed）集合 |
| document.forms | 返回对文档中所有 Form 对象引用。 |
| document.getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| document.getElementsByName() | 返回带有指定名称的对象集合。 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| document.images | 返回对文档中所有 Image 对象引用。 |
| document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
| document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
| document.inputEncoding | 返回用于文档的编码方式（在解析时）。 |
| document.lastModified | 返回文档被最后修改的日期和时间。 |
| document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
| document.normalize() | 删除空文本节点，并连接相邻节点 |
| document.normalizeDocument() | 删除空文本节点，并连接相邻节点的 |
| document.open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
| document.readyState | 返回文档状态 (载入中……) |
| document.referrer | 返回载入当前文档的文档的 URL。 |
| document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
| document.renameNode() | 重命名元素或者属性节点。 |
| document.scripts | 返回页面中所有脚本的集合。 |
| document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
| document.title | 返回当前文档的标题。 |
| document.URL | 返回文档完整的URL |
| document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| document.writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
Navigator 对象
Navigator 对象包含着有关浏览器的信息。
- Navigator 对象属性
| 属性 | 说明 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值 |
- Navigator 对象方法
| 方法 | 描述 |
|---|---|
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
Location 对象
location 对象存储着当前文档的 URL 信息。可以通过 window.location 访问。
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
location 对象方法
| 属性 | 描述 |
|---|---|
| assign() | 加载新的文档。 |
| reload() | 重新加载当前文档。 |
| replace() | 用新的文档替换当前文档。 |
Screen对象
screen 对象中存放着有关显示浏览器屏幕的信息，我们可以利用这些信息使用 JavaScript 优化页面的显示输出，比如根据显示器尺寸选择输出大小尺寸的图像等。
screen 对象的属性如下表所示
| 属性 | 描述 |
|---|---|
| availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外)。 |
| availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 |
| bufferDepth | 设置或返回调色板的比特深度。 |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度。 |
| deviceXDPI | 返回显示屏幕的每英寸水平点数。 |
| deviceYDPI | 返回显示屏幕的每英寸垂直点数。 |
| fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑。 |
| height | 返回显示屏幕的高度。 |
| logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数。 |
| logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数。 |
| pixelDepth | 返回显示屏幕的颜色分辨率（比特每像素）。 |
| updateInterval | 设置或返回屏幕的刷新率。 |
| width | 返回显示器屏幕的宽度。 |
History 对象
History 对象记录着用户在浏览器中访问过的 URL，开发人员无法直接得到用户浏览器的 URL，但是可以通过 History 对象实现后退和前进的操作。
History 对象仅有一个属性 history.length，它保存着历史记录的URL数量，初始值为1。
History 对象提供了一系列允许在浏览历史之间移动的方法，具体的方法及其说明如下。
| 方法 | 说明 |
|---|---|
| go(n) | 可以在用户的历史记录中任意跳转，n代表向后或者向前跳转的页面数的整数值，负数表示向后跳转，整数表示向前跳转，参数为0的时候可以刷新当前页面，没有参数相当于参数为0的情况。 |
| forward() | 等同于浏览器的前进按钮，相当于history.go(1) |
| back() | 等同于浏览器的后退按钮，相当于history.go(-1) |
| pushState(state, title, url) | HTML5中新增的方法，向History中添加一个状态，参数由状态对象、标题（可忽略）、可选的URL地址组成。 |
| replaceState(state, title, url) | HTML5中新增的方法，修改当前的历史记录条目而非创建新条目，其他与pushState()相同。 |
在使用前三个方法的时候，若移动的位置超过 History 所记录的历史的边界则不会报错，而是会静默的失败。