DOM(Document Object Model,文档对象模型)将XML/HTML文档构造成一个层次化的节点树,并提供了一系列的应用程序编程接口,以允许程序或脚本动态的访问和修改文档的内容、结构和样式。
DOM由W3C进行了标准化,W3C DOM标准中立于平台和语言,分为以下3个部分：
DOM标准化的历史如下:
核心DOM定义了一个通用性的,以节点为基础的结构化文档模型,DOM文档模型中的所有内容都是节点,整个文档是一个文档根节点。
节点的基本属性如下:
核心DOM规范中定义了以下节点类型:
| 类型 | 说明 | Type值 | 子节点 |
|---|---|---|---|
| Document(文档节点) | 表示整个文档(DOM树的根节点) | 9 | Element(max.one) ProcessingInstruction Comment DocumentType |
| Element(元素节点) | 表示标签元素 | 1 | Text ProcessingInstruction Comment CDATASection EntityReference |
| Attribute(属性节点) | 表示元素的属性 | 2 | Text EntityReference |
| Text(文本节点) | 表示元素或属性中的文本内容 | 3 | 无 |
| CDATASection(CDATA区段节点) | 表示文档中的 CDATA 区段 | 4 | 无 |
| DocumentFragment(文档片段节点) | 表示轻量级的Document 对象 | 11 | Text ProcessingInstruction Comment CDATASection EntityReference |
| Comment(注释节点) | 表示注释 | 8 | 无 |
其他还有几个，但一般不太用到，在此暂不列出。
节点树中的节点彼此拥有层级关系:父节点(parent),子节点(child)和同胞节点(sibling)等。父节点拥有子节点,同级的子节点被称为同胞节点。 另外一部分节点如元素节点拥有属性节点. DOM规范为节点提供了以下诸多属性,以用于获取节点的层次关联信息。
| 属性 | 说明 |
|---|---|
| childNodes | 获取当前节点的所有子节点(※1) |
| firstChild | 获取当前节点的第一个子节点(※1) |
| lastChild | 获取当前节点的最后一个子节点(※1) |
| ownerDocument | 获取该节点的文档根节点，相当与document |
| parentNode | 获取当前节点的父节点 |
| previousSibling | 获取当前节点的前一个同级节点 |
| nextSibling | 获取当前节点的后一个同级节点 |
| attributes | 获取当前元素节点的所有属性节点集合(※2) |
| 方法 | 说明 |
|---|---|
| document.write() | 这个方法可以把任意字符串插入到文档中 |
| document.createElement() | 创建一个元素节点 |
| node.appendChild() | 将新节点追加到子节点列表的末尾 |
| document.createTextNode() | 创建一个文本节点 |
| node.insertBefore() | 将新节点插入在前面 |
| node.replaceChild() | 将新节点替换旧节点 |
| node.cloneNode() | 复制节点 |
| node.removeChild() | 移除节点 |
HTML DOM定义了一个HTML文档的文档对象模型。
HTML文档首先是一个XML文档,为简单起见,XML DOM部分也包含在HTML DOM里一并说明。
HTML文档的主要构成元素是各类HTML标签,HTML文档中的标签对应着元素节点。
HTML元素的属性有attribute与property两个概念，这两个通常都被翻译成属性，但含义完全不一样。
通常每个attribute都有一个同名的property，property可以看成是attribute的包装器，同时也对attribute值进行必要的类型转换。
HTML:
<input id="input1" type="checkbox" checked= "checked"/>
<input id="input2" type="checkbox" checked= "true"/>
JavaScript:
console.log(document.getElementById("input1").getAttribute("checked")); // checked
console.log(document.getElementById("input1").checked); // true
console.log(document.getElementById("input2").getAttribute("checked"); // true
当一个DOM事件被触发的时候，它并不只是在它的起源对象上触发一次，而是会经历以下三个不同的阶段:
TODO:待编辑
TODO:待编辑
TODO:待编辑
TODO:待编辑