官方定义——应用程序编程接口（API）
文档对象模型是用于HTML和XML文档的应用程序编程接口，它定义文档的逻辑结构，以及访问和操作文档的方式。
"The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated." —— W3C DOM
一、文档的逻辑结构——节点对象树（DOM Tree）
DOM规范，将网页中的文档抽象为内存中的节点对象树。树中的每一个节点对象对应网页中的一个元素。
二、访问文档的方式——访问节点对象（access）
(0) Document作为文档入口
[Document] 接口代表整个文档。JavaScript 中的全局对象 document 是对 Document 接口的实现。
(1) 直接访问文档中的节点对象。
| 方法 | 描述 |
| document.getElementsById("id"); | 通过 id 属性获取节点对象 |
| document.getElementsByName("name"); | 通过 name 属性获取节点对象 |
| document/element.getElementsByTagName("tag"); | 通过 tag 属性获取节点对象 |
| document/element.getElementsByClassName("class1[ class2]"); | 通过 class 属性获取节点对象 |
| document/element.querySelector("selector"); | 通过 css 选择器 获取首个节点对象 |
| document/element.querySelectorAll("selector"); | 通过 css 选择器 获取所有节点对象 |
(2) 通过节点关系访问一个节点周围的节点对象。
| 关系 | 属性 | 描述 |
| 父节点(parent node) | parentNode/parentElement | 获取所属父节点对象 |
| ownerDocument | 获取节点所属文档节点（根节点）对象 | |
| 兄弟节点(sibling nodes) | nextSibling nextElementSibling |
获取前一个兄弟节点对象 获取前一个兄弟元素节点对象 |
| previousSibling previousElementSibling |
获取后一个兄弟节点对象 获取后一个兄弟元素节点对象 |
|
| 子节点(child nodes) | childNodes children |
获取所有子节点对象 获取所有子元素节点对象 |
| hasChildNodes(); | 判断是否包含子节点对象 | |
| childElementCount | 获取子元素节点对象数量 | |
| firstChild firstElementChild |
获取第一个子节点对象 获取第一个子元素节点对象 |
|
| lastChild lastElementChild |
获取最后一个子节点对象 获取最后一个子元素节点对象 |
三、操作文档的方式——操作节点对象（manipulate）
思路一：【节点对象】首先是一个【对象】，只要是对象就具有【属性】和【行为】。
元素节点p作为对象，id，class，style（该属性是一个对象）等作为对象的属性，onclick，onfocus，oninput 等作为对象的行为，具体的动作由 JavaScript 代码控制。
思路二：节点对象只包含属性 —— 特性属性、样式属性和行为(事件)属性。
将【行为】看作对象的一种属性，以下实例印证了这一观点：
我们获取节点对象的目的，就是为了操作节点对象本身以及节点对象的属性。
(0) 操作节点对象本身
| 操作 | 方法 | 描述 |
| 创建节点 | document.createElement("TAG"); document.createTextNode("#文本"); document.createComment("#注释"); document.createDocumentFragment(); document.createAttribute("myAttrName"); |
创建一个元素节点 创建一个文本节点 创建一个注释节点 创建一个空白的文档片段节点 创建一个属性节点（最新DOM规范中，已经不再把属性看作一个节点） |
| 插入节点 | parentNode.appendChild(newChild); parentNode.insertBefore(newChild,refChild); |
插入子节点（作为最后一个子节点） 插入子节点（在指定子节点之前） |
| 删除节点 | parentNode.removeChild(oldChild); | 删除指定的子节点 |
| 替换节点 | parentNode.replaceChild(newChild,oldChild); | 替换一个子节点 |
| 克隆节点 | node.cloneNode(deep); | 克隆一个节点 |
(1) 操作节点对象的特性属性
| 方法 | 描述 |
| e.特性名称[="value"]; | 获取/设置特性值 |
| e.getAttributeNames()； | 获取已设置的全部属性名称（非IE内核） |
| e.getAttribute("特性名称"); | 获取特性值 |
| e.getAttributeNode("特性名称"); | 获取特性节点[特性名称=特性值] |
| e.setAttribute("特性名称","特性值"); | 设置特性值（不存在时新建该属性） |
| e.setAttributeNode(Attr); | 设置特性节点（最新DOM规范中，已经不再把属性看作一个节点） |
(2) 操作节点对象的样式属性
| 方法 | 描述 |
| e.style.color[ ="颜色值"] | 获取/设置标签内样式（内嵌样式） |
| window.getComputedStyle(e).color; document.defaultView.getComputedStyle(e).color; |
获取包括内嵌样式、<style>、<link>在内的最终样式（非IE内核 或 IE>8） |
| e.currentStyle.color | 获取包括内嵌样式、<style>、<link>在内的最终样式（IE内核） |
(3) 操作节点对象的行为（事件）属性
| 方法 | 描述 |
| e.onclick[ =fun()]； e.onclick(); |
获取/设置事件 触发事件 |
| e.addEventListener("type",listener,[useCapture]); | 注册事件（非IE内核 或 IE>8） |
| e.attachEvent("ontype",listener); | 注册事件（IE内核<11） |
| e.removeEventListener("type",listener,[useCapture]); | 移除事件（非IE内核 或 IE>8） |
| e.detachEvent("ontype",listener); | 移除事件（IE内核<11） |
| e.dispatchEvent(event) | 调度（触发）事件 |
【The End】