【078】◀▶ HTML DOM
●·● 目录：
A0 ………… Core DOM
A1 ………… DOM Node 对象
A2 ………… DOM NodeList 对象
A3 ………… DOM NamedNodeMap 对象
A4 ………… DOM Document 对象
A5 ………… DOM Element 对象
A6 ………… DOM Attr 对象
G1 ………… DOM Document 对象
G2 ………… DOM Event 对象
G3 ………… DOM Element 对象
G4 ………… DOM Anchor 对象
G5 ………… DOM Area 对象
G6 ………… DOM Body 对象
G6 ………… DOM Button 对象
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A0个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● Core DOM：
通过 JavaScript，可以重构整个 HTML 文档，可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。但 DOM 不是 JavaScript 专有的，事实上许多其他语言都实现了它。不过，Web 浏览器中的 DOM 已经用 ECMAScript 实现了，现在是 JavaScript 语言的一个很大组成部分。
DOM 被分为不同的部分（核心、HTML及XML）：
- Core DOM：定义了一套标准的针对任何结构化文档的对象。
- HTML DOM：定义了一套标准的针对 HTML 文档的对象。 学习HTML DOM。
- XML DOM：定义了一套标准的针对 XML 文档的对象。 学习XML DOM。
DOM 有三个level（1/2/3）：
- DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由两个模块组成，即 DOM Core 和 DOM HTML。前者提供了基于 XML 的文档的结构图，以便访问和操作文档的任意部分；后者添加了一些 HTML 专用的对象和方法，从而扩展了 DOM Core。DOM Level 1 只是一个目标，即规划文档的结构。
- DOM Level 2 的目标非常广泛。对原始 DOM 的扩展添加了对鼠标和用户界面事件（DHTML 对此有丰富的支持）、范围、遍历（重复执行 DOM 文档的方法）的支持，并通过对象接口添加了对 CSS（层叠样式表）的支持。由 Level 1 引入的原始 DOM Core 也加入了对 XML 命名空间的支持。DOM Level 2 引入了几种 DOM 新模块，用于处理新的接口类型：
- DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
- DOM 事件 - 描述事件的接口
- DOM 样式 - 描述处理基于 CSS 样式的接口
- DOM 遍历和范围 - 描述遍历和操作文档树的接口
- DOM Level 3 引入了以统一的方式载入和保持文档的方法（包含在新模块 DOM Load and Save）以及验证文档（DOM Validation）的方法，从而进一步扩展了 DOM。在 Level 3 中，DOM Core 被扩展为支持所有的 XML 1.0 特性，包括 XML Infoset、XPath 和 XML Base。
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A1个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Node 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_node.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
节点对象代表文档树中的一个节点。Node 对象是整个 DOM 的主要数据类型。节点可以是文档节点、元素节点、属性节点、文本节点、注释节点等，详见后面的表格。
| Node 对象属性 | 描述 | DOM |
|---|---|---|
| attributes | 返回元素属性的NamedNodeMap | 1 |
| baseURI | 返回元素的绝对基准 URI | 3 |
| childNodes | 返回元素的子节点的 NodeList | 1 |
| firstChild | 返回节点的首个子节点。 | 1 |
| lastChild | 返回节点的最后一个子节点。 | 1 |
| localName | 返回节点的本地名称。 | 2 |
| namespaceURI | 返回元素的命名空间 URI | 2 |
| nextSibling | 返回节点之后紧跟的同级节点。 | 1 |
| nodeName | 返回节点的名称，根据其类型。 | 1 |
| nodeType | 返回节点的类型。 | 1 |
| nodeValue | 设置或返回节点的值，根据其类型。 | 1 |
| ownerDocument | 返回节点的根元素（document 对象）。 | 2 |
| parentNode | 返回节点的父节点。 | 1 |
| prefix | 设置或返回节点的命名空间前缀。 | 2 |
| previousSibling | 返回节点之前紧跟的同级节点。 | 1 |
| textContent | 设置或返回节点及其后代的文本内容。 | 3 |
| Node 对象方法 | 描述 | DOM |
|---|---|---|
| append Child() | 向节点的子节点列表的结尾添加新的子节点。 | 1 |
| cloneNode() | 复制节点。 | 1 |
| compareDocumentPosition() | 对比两个节点的文档位置。 | 1 |
| getFeature(feature,version) | 返回一个 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。 | 3 |
| getUserData(key) | 返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用 setUserData 被设置到此节点。 | 3 |
| hasAttributes() | 判断当前节点是否拥有属性。 | 2 |
| hasChildNodes() | 判断当前节点是否拥有子节点。 | 1 |
| insertBefore() | 在指定的子节点前插入新的子节点。 | 1 |
| isDefaultNamespace() | 返回指定的命名空间 URI 是否为默认。 | 3 |
| isEqualNode() | 检查两个节点是否相等。 | 3 |
| isSameNode() | 检查两个节点是否是相同的节点。 | 3 |
| isSupported() | 返回当前节点是否支持某个特性。 | 2 |
| lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 | 3 |
| lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 | 3 |
| normalize() | 合并相邻的Text节点并删除空的Text节点。 | 2 |
| removeChild() | 删除（并返回）当前节点的指定子节点。 | 1 |
| replaceChild() | 用新节点替换一个子节点。 | 1 |
| setUserData(key,data,handler) | 把对象关联到节点上的一个键上。 | 3 |
| 节点类型nodeType | 描述 | nodeName 返回值 | nodeValue 返回值 | 子节点 | |
|---|---|---|---|---|---|
| 1 | Element | 表示 element（元素）元素。 | element name | null | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
| 2 | Attr | 表示属性。 | 属性名称 | 属性值 | Text, EntityReference |
| 3 | Text | 表示元素或属性中的文本内容。 | #text | 节点内容 | None |
| 4 | CDATASection | 表示文档中的 CDATA 区段（文本不会被解析器解析）。 | #cdata-section | 节点内容 | None |
| 5 | EntityReference | 表示实体引用元素。 | 实体引用名称 | null | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 6 | Entity | 表示实体。 | 实体名称 | null | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 7 | ProcessingInstruction | 表示处理指令。 | target | 节点的内容 | None |
| 8 | Comment | 表示注释。 | #comment | 注释文本 | None |
| 9 | Document | 表示整个文档（DOM 树的根节点）。 | #document | null | Element, ProcessingInstruction, Comment, DocumentType |
| 10 | DocumentType | 向为文档定义的实体提供接口。 | doctype 名称 | null | None |
| 11 | DocumentFragment | 表示轻量级的 Document 对象，其中容纳了一部分文档。 | #document fragment | null | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 12 | Notation | 表示在 DTD 中声明的符号。 | 符号名称 | null | None |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM NodeList 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_nodelist.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
| NodeList 对象属性 | 描述 | DOM |
|---|---|---|
| length | 返回节点列表中的节点数目。 | 1 |
| NodeList 对象方法 | 描述 | DOM |
|---|---|---|
| item() | 返回节点列表中处于指定的索引号的节点。 | 1 |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A3个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM NamedNodeMap 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_namednodemap.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
| NamedNodeMap 对象属性 | 描述 | DOM |
|---|---|---|
| length | 返回列表中的节点数目 | 1 |
| NamedNodeMap 对象方法 | 描述 | DOM |
|---|---|---|
| getNamedItem() | 返回指定的节点（通过名称） | 1 |
| getNamedItemNS() | 返回指定的节点（通过名称和命名空间） | 2 |
| item() | 返回处于指定索引号的节点 | 1 |
| removeNamedItem() | 删除指定的节点（根据名称）/td> | 1 |
| removeNamedItemNS() | 删除指定的节点（根据名称和命名空间） | 2 |
| setNamedItem() | 设置指定的节点（根据名称） | 1 |
| setNamedItemNS() | 设置指定的节点（通过名称和命名空间） | 2 |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A4个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Document 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_core_document.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
| Document 对象属性 | 描述 | DOM |
|---|---|---|
| 继承所有Node对象的属性 | ||
| doctype | 返回与文档相关的文档类型声明 (DTD)。 | 1 |
| documentElement | 返回文档的根节点 | 1 |
| documentURI | 设置或返回文档的位置 | 3 |
| domConfig | 返回normalizeDocument()被调用时所使用的配置 | 3 |
| implementation | 返回处理该文档的 DOMImplementation 对象。 | 1 |
| inputEncoding | 返回用于文档的编码方式（在解析时）。 | 3 |
| strictErrorChecking | 设置或返回是否强制进行错误检查。 | 3 |
| xmlEncoding | 返回文档的编码方法。 | 3 |
| xmlStandalone | 设置或返回文档是否为 standalone。 | 3 |
| xmlVersion | 设置或返回文档的 XML 版本。 | 3 |
| Document 对象方法 | 描述 | DOM |
|---|---|---|
| 继承所有Node对象的方法 | ||
| adoptNode(node) | 从另一个文档向本文档选定一个节点，然后返回被选节点。 | 3 |
| createAttribute() | 创建拥有指定名称的属性节点，并返回新的 Attr 对象。 | 1 |
| createAttributeNS(URI,name) | 创建拥有指定名称和命名空间的属性节点，并返回新的 Attr 对象。 | 2 |
| createCDATASection() | 创建 CDATA 区段节点，仅适用于XML。 | 1 |
| createComment() | 创建注释节点。 | 1 |
| createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象。 | 1 |
| create Element() | 创建元素节点。 | 1 |
| create ElementNS() | 创建带有指定命名空间的元素节点。 | 2 |
| createEntityReference() | 创建 EntityReference 对象，并返回此对象，仅适用于XML。 | 1 |
| createProcessingInstruction() | 创建 ProcessingInstruction 对象，并返回此对象，仅适用于XML。 | 1 |
| createTextNode() | 创建文本节点。 | 1 |
| getElementById() | 查找具有指定的唯一 ID 的元素。 | 2 |
| getElements ByTagName() | 返回所有具有指定名称的元素节点。 | 1 |
| getElementsByTagNameNS() | 返回所有具有指定名称和命名空间的元素节点。 | 2 |
| importNode() | 把一个节点从另一个文档复制到该文档以便应用。 | 2 |
| normalizeDocument() | Removes empty Text nodes, and joins adjacent nodes | 3 |
| renameNode() | 重命名指定的节点。 | 3 |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A5个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Element 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_element.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
| Element 对象属性 | 描述 | DOM |
|---|---|---|
| 继承所有Node对象的属性 | ||
| schemaTypeInfo | 返回与元素相关联的类型信息 | 3 |
| tagName | 返回元素的名称 | 1 |
| Element 对象方法 | 描述 | DOM |
|---|---|---|
| 继承所有Node对象的方法 | ||
| getAttribute() | 返回属性的值。 | 1 |
| getAttributeNS() | 返回属性的值，仅适用于XML。 | 2 |
| getAttributeNode() | 以 Attribute 对象返回属性节点 | 1 |
| getAttributeNodeNS() | 以 Attribute 对象返回属性节点，仅适用于XML。 | 3 |
| getElements ByTagName() | 找到具有指定标签名的子孙元素。 | 1 |
| getElementsByTagNameNS() | 找到具有指定标签名和命名空间的元素，仅适用于XML。 | 2 |
| hasAttribute() | 返回元素是否拥有指定的属性。 | 2 |
| hasAttributeNS() | 返回元素是否拥有指定的属性，仅适用于XML。 | 2 |
| removeAttribute() | 删除指定的属性。 | 1 |
| removeAttributeNS() | 删除指定的属性，仅适用于XML。 | 2 |
| removeAttributeNode() | 删除指定的属性节点。 | 1 |
| setAttribute() | 添加新属性。 | 1 |
| setAttributeNS() | 添加新属性，仅适用于XML。 | 2 |
| setAttributeNode() | 添加或改变属性节点。 | 1 |
| setAttributeNodeNS() | 添加或改变属性节点。 | 2 |
| setIdAttribute() | 如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）。 | 3 |
| setIdAttributeNS() | 如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）（带有命名空间）。 | 3 |
| setIdAttributeNode() | 如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）。 | 3 |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第A6个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Attr 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_attr.asp
▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html
| Attr 对象属性 | 描述 | DOM |
|---|---|---|
| 继承所有Node对象的属性 | ||
| isId | 如果属性是 id 类型，则返回 true，否则返回 false。 | 3 |
| name | 返回属性的名称。 | 1 |
| ownerElement | 返回属性所附属的元素节点。 | 2 |
| schemaTypeInfo | 返回与属性相关联的类型信息。 | 3 |
| specified | 如果属性值被设置在文档中，则返回 true，如果其默认值被设置在 DTD/Schema 中，则返回 false。 | 1 |
| value | 设置或返回属性的值。 | 1 |
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G1个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Document 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_document.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_document.asp
1. 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问.
Document 对象是 Window 对象的一部分, 可通过 window.document 属性对其进行访问.
2. 方法：
- getElementById(id)：返回对拥有指定 id 的第一个对象的引用.
- getElementByName(name)：返回带有指定名称的对象集合.
- getElementByTagName(tagname)：返回带有指定标签名的对象集合.
- open(mimetype, replace)：可打开一个新文档, 并擦除当前新文档的内容.
- close()：关闭打开的输出流.
- write(exp1, exp2, exp3, ...)：向文档写 HTML 表达式 或 JavaScript 代码.
- writeln()：自动换行.
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态, 比如事件在发生的元素, 键盘按键的状态, 鼠标的位置, 鼠标按钮的状态. 事件通常与函数结合使用, 函数不会在事件发生前被执行.
2. 鼠标 / 键盘属性：
- altKey：返回当事件被触发时, "ALT" 是否被按下.
- ctrlKey：
- shiftKey：
- metaKey：
- button：返回一个整数, 指示哪个鼠标按键被点击.
0 - 左键
1 - 中键
2 - 右键 - relatedTarget：返回与事件的目标节点相关的节点.
- clientX：相对于浏览器页面(或客户区)的水平坐标(px).
- clientY：
- screenX：相对于整个屏幕的水平坐标(px).
- screenY：
3. 事件句柄：
- onabort：图像加载被中断. <img> image
- onblur：元素失去焦点, 点别的了. <a>, <input>, <p> ... button, checkbox ...
- onchange：文本改变时发生. <input type="text"> ... text, textarea ...
- onclick：点击的时候触发. <a>, <input>, <p> ... button, checkbox ...
- ondblclick：双击时触发. <a>, <input>, <p> ... document, link
- onerror：加载发生错误时. <img> ... window, image
- onfocus：对象获得焦点时. <a>, <input>, <p> ... button, checkbox ...
- onkeydown：某个按键按下. <a>, <input>, <p> ... document, image ...
- onkeypress：某个按键按下并松开.
- onkeyup：某个按键被松开.
- onmousedown：鼠标按钮被按下. <a>, <input>, <p> ... button, document, link
- onmousemove：鼠标被移动.
- onmouseout：鼠标从某个元素移开.
- onmouseover：鼠标移到某个元素之上.
- onmouseup：鼠标按钮被松开.
- onload：页面或图像完成加载时触发. <img> ... image, window ...
- onreset：重置按钮被点击. <form> form
- onresize：窗口或框架大小发生变化的时候触发. <a>, <input>, <p> ... window
- onselect：文本框中的文字被选中时触发. <input type="text"> <textarea> window
- onsubmit：表单中的确定按钮被点击时发生. <form> form
- onunload：用户退出页面时发生. <body>, <frameset> window
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G3个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Element 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_all.asp
1. 下面的属性和方法可以被所有的 HTML 元素使用. 同时所有的元素也可以是使用 Node object 和 Element object 的属性和方法.
2. 属性：
- accessKey：设置或返回一个元素的 accesskey, 可以通过 Alt+accesskey 来操作.
- className：设置或返回一个元素的 class 属性.
- id：设置或返回一个元素的 id, 用来标识元素的.
- innerHTML：设置或返回一个元素的 HTML 内容.
- lang：设置或返回一个元素的语言.
- style：设置或返回一个元素的 style 属性.
- tabIndex：设置或返回一个元素的 tab 顺序.
- title：设置或返回一个元素的 title 属性.
- dir：设置或返回一个元素的文本方向. "ltr" - LeftToRight, "rtl" - RightToLeft.
- clientHeight：返回元素的高度(不包括 borders, margins, scrollbars).
- clientWidth：
- offsetHeight：返回元素的高度, 包括 borders 和 paddings, 不包多 margins.
- offsetWidth：
- offsetLeft：返回相对于其容器的做偏移量.
- offsetTop：
- offsetParent：返回其容器的元素.
- scrollHeight：返回元素的整个高度.
- scrollWidth：
- scrollLeft：返回元素的实际左偏移量.
- scrollTop：
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G4个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Anchor 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_anchor.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_anchor.asp
1. Anchor 对象表示 HTML 超链接, 在 HTML 中 <a> 出现, 就会创建 Anchor 对象. 锚可以创建另一个文档的链接, 也可以创建文档内书签, 可以通过 document.anchors[] 数组来访问锚, 也可以通过 document.getElementById(). 同时也可以使用 Node object 和 Element object 的属性和方法.
2. 属性：
- accessKey：设置或返回访问一个链接的快捷键。
- charset：设置或返回被链接资源的字符集。
- coords：设置或返回逗号分隔列表，包含了图像映射中链接的坐标。
- href：设置或返回被链接资源的 URL。
- hreflang：设置或返回被链接资源的语言代码。
- id：设置或返回一个链接的 id。
- innerHTML：设置或返回一个链接的内容。
- name：设置或返回一个链接的名称。
- rel：设置或返回当前文档与目标 URL 之间的关系。
- rev：设置或返回目标 URL 与之间当前文档的关系。
- shape：设置或返回图像映射中某个链接的形状。
- tabIndex：设置或返回某个链接的 Tab 键控制次序。
- target：设置或返回在何处打开链接。
- type：设置或返回被链接资源的 MIME 类型。
3. 标准属性：
- className：设置或返回元素的 class 属性。
- dir：设置或返回文本的方向。
- lang：设置或返回元素的语言代码。
- title：设置或返回元素的 title 属性。
4. 方法：
- blur()：把焦点从链接上移开。
- focus()：给链接应用焦点。
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G5个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Area 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_area.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_area.asp
1. Area 对象代表图像映射的一个区域(图像映射指带有可点击区域的图像), 在 HTML 中 <area> 出现, 就会创建 Area 对象. 同时也可以使用 Node object 和 Element object 的属性和方法.
2. 属性：
- accessKey：设置或返回访问某个区域的快捷键。
- alt：设置或返回当浏览器无法显示某个区域时的替换文字。
- coords：设置或返回图像映射中可点击区域的坐标。
- hash：设置或返回某个区域中 URL 的锚部分。
- host：设置或返回某个区域中 URL 的主机名和端口。
- href：设置或返回图像映射中链接的 URL。
- id：设置或返回某个区域的 id。
- noHref：设置或返回某个区域是否应是活动的还是非活动的。
- pathname：设置或返回某个区域中的 URL 的路径名。
- protocol：设置或返回某个区域中的 URL 的协议。
- search：设置或返回某个区域中 URL 的查询字符串部分。
- shape：设置或返回图像映射中某个区域的形状。
- tabIndex：设置或返回某个区域的 tab 键控制次序。
- target：设置或返回在何处打开区域中的 link-URL。
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G6个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Body 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_body.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_body.asp
1. Body 对象代表文档的主体(HTML body). 同时也可以使用 Node object 和 Element object 的属性和方法.
2. 属性：
- link：设置或返回 link 颜色值, 即链接的颜色.
- aLink：设置或返回 active link 颜色值, 即鼠标点瞬间的颜色值.
- vLink：设置或返回 visited link 颜色值, 即访问链接后的颜色值.
- background：设置或返回 background 属性.(可以是图片).
- bgColor：设置或返回背景颜色值.
- text：设置或返回 body 内部文本的颜色值.
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G7个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Button 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_pushbutton.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_pushbutton.asp
1. Button 对象代表一个按钮, 在 HTML 中 <button> 出现, Button 对象就会被创建.
2. 属性：
- accessKey：设置或返回访问某个按钮的快捷键。
- disabled：设置或返回是否禁用按钮。
- form：返回对包含按钮的表单的引用。
- id：设置或返回按钮的 id。
- name：设置或返回按钮的名称。
- tabIndex：设置或返回按钮的 Tab 键控制次序。
- type：返回按钮的表单类型。
- value：设置或返回显示在按钮上的文本。
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态
---------------------------------------------------------------------------------------------------------
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝
●·● DOM Event 对象：
▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_event.asp
▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1. Event 对象代表事件的状态
╔════════╗
╠════╣ 第G2个 ╠══════════════════════════════════════════════════╣
╚════════╝