JavaScript HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

DOM 参考资料（ DOM 操作比较容易理解，这里不展开）：

1. https://www.w3schools.com/js/js_htmldom.asp
2. http://www.w3school.com.cn/js/js_htmldom.asp
3. http://javascript.ruanyifeng.com/#dom

JavaScript Browser BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

浏览器对象模型（ Browser Object Model ）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

BOM 主要包括：

• Window 对象（包含下面3个对象）
• History 对象
• Location 对象
• Document 对象

Window 对象

在浏览器中， window 对象（注意， w 为小写，正如我们说 Document 对象时，代码操作使用小写的 document ）指当前的浏览器窗口。它也是所有对象的顶层对象。

编程时， window 可以省略，如 window.alert() 等同于 alert()

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员：

• 全局变量是 window 对象的属性。

  从语言设计的角度看，所有变量都是 window 对象的属性，其实不是很合理。因为 window 对象有自己的实体含义，不适合当作最高一层的顶层对象。这个设计失误与 JavaScript 语言匆忙的设计过程有关，最早的设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者Brendan Eich就把 window 对象当作顶层对象，所有未声明就赋值的变量都自动变成 window 对象的属性。这种设计使得编译阶段无法检测出未声明变量，但到了今天已经没有办法纠正了。

• 全局函数是 window 对象的方法。

• 甚至 HTML DOM 的 document 对象也是 window 对象的属性之一：

  window.document.getElementById("header");

  与此相同：

  document.getElementById("header");

一、window 对象的常用属性

编程时， window 可以省略，如 window.history.back() 等同于 history.back()

// window 对象的 window 属性指向自身
window.window === this; // true

1. history 属性：用户（在浏览器窗口中）访问过的 URL

history 属性就是 History 对象的引用

history 方法：

• history.back() 加载上一个浏览过的文档
• history.forward() 加载下一个浏览过的文档
• history.go(n) 跳转到第 n（n为整数）个浏览过的文档
  • n=0 刷新当前页面
  • n>0 向前跳转到第 n 个浏览过文档
  • n<0 向后跳转到第 n 个浏览过文档

2. location 属性：用于窗口或框架（iframe）的 Location 对象

location 属性就是 Location 对象的引用

location 属性：

• location.host 设置或返回主机名和当前 URL 的端口号
• location.hostname 设置或返回当前 URL 的主机名
• location.href 设置或返回完整的 URL ，可用于设置跳转
• location.hash 设置或返回从井号（ # ）开始的 URL （锚）
• location.search 设置或返回从问号（ ? ）开始的 URL （查询部分）

location 方法：

• location.reload() 重新加载当前的文档，刷新页面
• location.replace() 新的文档替换当前文档

3. document 属性：对 Document 对象的只读引用

document 属性是对 Document 对象的只读引用

每个载入浏览器的 HTML 文档都会成为 Document 对象，利用 Document 对象可以对 HTML 页面中的所有元素进行访问

document 常用属性：

• document.title 设置或返回当前文档的标题

document 常用方法：

• document.write() 向文档写 HTML 表达式或 JavaScript 代码
• document.getElementsById() 返回对拥有指定 id 的第一个对象的引用（通过 id 查找 HTML 元素）
• document.getElementsByTagName() 返回带有指定名称的对象集合（通过标签名查找 HTML 元素，返回的是数组）
• document.getElementsByName() 返回带有指定名称的对象集合（通过元素的 name 属性查找 HTML 元素，返回的是数组）

二、window 对象的常用方法

编程时， window 可以省略，如 window.alert() 等同于 alert()

1. alert() 弹出一个带有提示信息和确定按钮的警告框
2. confirm() 弹出一个带有提示信息、取消（返回 false ）和确定（返回 true ）按钮的确认框
3. prompt() 弹出一个带有提示信息、输入框、取消（返回 null ）和确定（返回输入值）按钮的提示框
4. open() 打开一个新的窗口
5. close() 关闭当前窗口
6. setTimeout() 在指定的毫秒数后调用函数或计算表达式
7. setInterval() 按照指定的周期（以毫秒计算）来调用函数或表达式