{"action":"opened","issue":{"url":"https://api.github.com/repos/FatliTalk/blog/issues/91","repository_url":"https://api.github.com/repos/FatliTalk/blog","labels_url":"https://api.github.com/repos/FatliTalk/blog/issues/91/labels{/name}","comments_url":"https://api.github.com/repos/FatliTalk/blog/issues/91/comments","events_url":"https://api.github.com/repos/FatliTalk/blog/issues/91/events","html_url":"https://github.com/FatliTalk/blog/issues/91","id":316567177,"number":91,"title":"JavaScript的DOM和BOM","user":{"login":"FatliTalk","id":19491358,"avatar_url":"https://avatars2.githubusercontent.com/u/19491358?v=4","gravatar_id":"","url":"https://api.github.com/users/FatliTalk","html_url":"https://github.com/FatliTalk","followers_url":"https://api.github.com/users/FatliTalk/followers","following_url":"https://api.github.com/users/FatliTalk/following{/other_user}","gists_url":"https://api.github.com/users/FatliTalk/gists{/gist_id}","starred_url":"https://api.github.com/users/FatliTalk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FatliTalk/subscriptions","organizations_url":"https://api.github.com/users/FatliTalk/orgs","repos_url":"https://api.github.com/users/FatliTalk/repos","events_url":"https://api.github.com/users/FatliTalk/events{/privacy}","received_events_url":"https://api.github.com/users/FatliTalk/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-22T10:27:02Z","updated_at":"2018-04-22T10:27:02Z","closed_at":null,"author_association":"OWNER","body":"# JavaScript HTML DOM\r\n\r\n> 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。\r\n\r\nDOM 参考资料（ DOM 操作比较容易理解，这里不展开）：\r\n\r\n1. https://www.w3schools.com/js/js_htmldom.asp\r\n2. http://www.w3school.com.cn/js/js_htmldom.asp\r\n3. http://javascript.ruanyifeng.com/#dom\r\n\r\n<br>\r\n\r\n---\r\n\r\n<br>\r\n\r\n# JavaScript Browser BOM\r\n\r\n浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。\r\n\r\n> 浏览器对象模型（ Browser Object Model ）尚无正式标准。\r\n>\r\n> 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。\r\n\r\n\r\n\r\nBOM 主要包括：\r\n\r\n- Window 对象（包含下面3个对象）\r\n- History 对象\r\n- Location 对象\r\n- Document 对象\r\n\r\n<br>\r\n\r\n![bom](https://user-images.githubusercontent.com/19491358/39093933-05945f4a-465a-11e8-9749-b00e870f5b75.png)\r\n\r\n<br>\r\n\r\n## Window 对象\r\n\r\n> 在浏览器中， `window` 对象（注意， `w` 为小写，正如我们说 Document 对象时，代码操作使用小写的 `document` ）指当前的浏览器窗口。它也是所有对象的顶层对象。\r\n>\r\n> 编程时， `window` 可以省略，如 `window.alert()` 等同于 `alert()`\r\n\r\n\r\n\r\n所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员：\r\n\r\n- 全局变量是 window 对象的属性。\r\n\r\n  从语言设计的角度看，所有变量都是 window 对象的属性，其实不是很合理。因为 window 对象有自己的实体含义，不适合当作最高一层的顶层对象。这个设计失误与 JavaScript 语言匆忙的设计过程有关，最早的设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者Brendan Eich就把 window 对象当作顶层对象，所有未声明就赋值的变量都自动变成 window 对象的属性。这种设计使得编译阶段无法检测出未声明变量，但到了今天已经没有办法纠正了。\r\n\r\n\r\n- 全局函数是 window 对象的方法。\r\n\r\n- 甚至 HTML DOM 的 **document 对象也是 window 对象的属性**之一：\r\n\r\n  ```javascript\r\n  window.document.getElementById(\"header\");\r\n  ```\r\n\r\n  与此相同：\r\n\r\n  ```javascript\r\n  document.getElementById(\"header\");\r\n  ```\r\n\r\n<br>\r\n\r\n### 一、window 对象的常用属性\r\n\r\n> 编程时， `window` 可以省略，如 `window.history.back()` 等同于 `history.back()`\r\n\r\n\r\n\r\n```javascript\r\n// window 对象的 window 属性指向自身\r\nwindow.window === this; // true\r\n```\r\n\r\n\r\n\r\n#### 1. history 属性：用户（在浏览器窗口中）访问过的 URL\r\n\r\n> history 属性就是 History 对象的**引用**\r\n\r\nhistory 方法：\r\n\r\n- `history.back()` 加载上一个浏览过的文档\r\n- `history.forward()` 加载下一个浏览过的文档\r\n- `history.go(n)` 跳转到第 n（n为整数）个**浏览过**的文档 \r\n  - n=0 刷新当前页面\r\n  - n>0 向前跳转到第 n 个浏览过文档\r\n  - n<0 向后跳转到第 n 个浏览过文档\r\n\r\n\r\n\r\n#### 2. location 属性：用于窗口或框架（iframe）的 Location 对象\r\n\r\n> location 属性就是 Location 对象的**引用**\r\n\r\nlocation 属性：\r\n\r\n- `location.host` 设置或返回主机名和当前 URL 的端口号\r\n- `location.hostname` 设置或返回当前 URL 的主机名\r\n- `location.href` 设置或返回完整的 URL ，可用于设置跳转\r\n- `location.hash` 设置或返回从井号（ `#` ）开始的 URL （锚）\r\n- `location.search` 设置或返回从问号（ `?` ）开始的 URL （查询部分）\r\n\r\nlocation 方法：\r\n\r\n- `location.reload()` 重新加载当前的文档，刷新页面\r\n- `location.replace()` 新的文档替换当前文档\r\n\r\n\r\n\r\n#### 3. document 属性：对 Document 对象的只读引用\r\n\r\n> document 属性是对 Document 对象的只读**引用**\r\n>\r\n> 每个载入浏览器的 HTML 文档都会成为 Document 对象，利用 Document 对象可以对 HTML 页面中的所有元素进行访问\r\n\r\ndocument **常用**属性：\r\n\r\n- `document.title` 设置或返回当前文档的标题\r\n\r\ndocument **常用**方法：\r\n\r\n- `document.write()` 向文档写 HTML 表达式或 JavaScript 代码\r\n- `document.getElementsById()` 返回对拥有指定 id 的第一个对象的引用（通过 id 查找 HTML 元素）\r\n- `document.getElementsByTagName()` 返回带有指定名称的对象集合（通过标签名查找 HTML 元素，返回的是数组）\r\n- `document.getElementsByName()` 返回带有指定名称的对象集合（通过元素的 name 属性查找 HTML 元素，返回的是数组）\r\n\r\n<br>\r\n\r\n<br>\r\n\r\n### 二、window 对象的常用方法\r\n\r\n> 编程时， `window` 可以省略，如 `window.alert()` 等同于 `alert()`\r\n\r\n1. `alert()` 弹出一个带有提示信息和确定按钮的警告框\r\n2. `confirm()` 弹出一个带有提示信息、取消（返回 false ）和确定（返回 true ）按钮的确认框\r\n3. `prompt()` 弹出一个带有提示信息、输入框、取消（返回 null ）和确定（返回输入值）按钮的提示框\r\n4. `open()` 打开一个新的窗口\r\n5. `close()` 关闭当前窗口\r\n6. `setTimeout()` 在指定的毫秒数后调用函数或计算表达式\r\n7. `setInterval()` 按照指定的周期（以毫秒计算）来调用函数或表达式\r\n\r\n"}}
{"actor":{"display_login":"FatliTalk"}}