目录
1 DOM概念
DOM是document object model（文档对象模型）的缩写，它是由w3c（world wied web （万维网）委员会）定义的
1.1 Document（文档）
创建一个网页并将该网页添加到web中，dom就会根据这个网页创建一个文档对象。如果没有document（文档），dom也就无从说起
1.2 Object（对象）
对象是一个独立的数据集合，如文档对象，即是文档中元素与容的数据集合。与某个特定对象相关联的变量称为这个对象的属性，可以通过某个特定对象去调用的函数被称为这个对象的方法。
1.3 Model（模型）
模型代表将文档对象表示为树状模型，在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点
DOM是访问和操作web页面的接口，使用该接口可以访问页面中其他标准组件。dom解决了JavaScript与JScript之间的冲突，给开发者定义了一个标准的方法，使他们来访问站点中的数据，脚本和表现层对象
2 DOM分层以及图示
文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容，如下以简单代码，来说明：
<html>
<head>
<title>标题内容</title>
</head>
<body>
<h3>三号标题</h3>
<b>加粗内容</b>
</body>
</html>
文档的层次结构图：
上图看出，在dom中，每一个对象都可以称为一个节点（node）
2.1 各个节点的介绍
2.1.1 根节点
在最顶层的<html>节点，称为根节点。
2.1.2 父节点
一个节点之上的节点是该节点的父节点（parent）。例如：<html>是《head》和《body》父节点，《head》是《title》的父节点
2.1.3 子节点
位于一个节点之下的节点就是该节点的子节点。例如《head》和《body》是《html》的子节点，《title》是《head》子节点
2.1.4 兄弟节点
如果多个节点在同一个层次，并拥有者相同的父节点，这几个节点就是兄弟节点（sibling），例如：《head》和《body》就是兄弟节点
2.1.5 后代
一个节点的子节点的结合可以称为是该节点的后代（descendant），例如：《head》和《body》就是《html》的后代
2.1.6 叶子节点
在树形结构最底部的节点称为叶子节点。例如：“标题内容”，“3号标题”和“加粗内容”都是叶子节点
2.2 节点类型
主要有3种类型的节点
2.2.1 元素节点
在html中<body>,<p>,<a>等一系列标记，是这个文档的元素节点，元素节点组成了文档模型的语义逻辑结构
2.2.2 文本节点
包含在元素节点中的内容部分，如<p>标签中的文本等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的
2.2.3 属性节点
元素节点的属性，如<a>标签的href属性与title属性等，一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含在元素节点当中
3 DOM对象节点属性
DOM常用的节点属性
| 属性 | 说明 |
| nodeName | 节点的名称 |
| nodeValue | 节点的值，通常只应用与文本节点 |
| nodeType | 节点类型 |
| parentNode | 返回当前节点的父节点 |
| childNodes | 子节点列表 |
| firstChild | 返回当前节点的第一个子节点 |
| lastChild | 返回当前节点的最后一个子节点 |
| previousSibling | 返回当前节点的前一个兄弟节点 |
| nextSibling | 返回当前节点的后一个兄弟节点 |
| attributes | 元素的属性列表 |
其中nodetype：节点的类型可取值为：
| 类型 | 数值 | 节点名 | 说明 |
| 元素（element） | 1 | 标记 | 任何HTML或xml的标记 |
| 属性（attribute） | 2 | 属性 | 标记中的属性 |
| 文本（text） | 3 | #text | 包含标记中的文本 |
| 注释（comment） | 8 | #comment | HTML的注释 |
| 文档（document） | 9 | #document | 文档对象 |
| 文档类型（documentType） | 10 | DOCTYPE | DTD规范 |
4 在一个页面添加任意节点
4.1 添加任意节点的代码
function dc(){
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
for (var i =0;i<aText.length;i++){
var ce= document.createElement("b");
var cText=document.createTextNode(aText[i]);
ce.appendChild(cText);
document.body.appendChild(ce);
}
}
dc();注意：上例中使用appendChild（）方法，将节点添加到页面中。由于appendchild（）方法在每一次添加新的节点时都会刷新页面，会使浏览器显得十分缓慢。这里可以通过使用createDocumentFragment（）（创建碎片文档）来解决这个问题，使用了createDocumentFragment（）方法只会刷新一次页面的形式中动态添加多个<p>节点
4.2 添加任意节点的代码的优化
function dc(){
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
var cdf= document.createDocumentFragment();//创建文件碎片节点
for (var i =0;i<aText.length;i++){
var ce= document.createElement("b");
var cb=document.createElement("br");
var cText=document.createTextNode(aText[i]);
ce.appendChild(cText);
cdf.appendChild(ce);
cdf.appendChld(cb);
}
document.body.appendChild(cdf);
}
dc();5 与DHTML相对应的DOM
主要是通过innerHTML，innerText，outerHTML，outerText，
注意：innerHTML属性被大多浏览器支持，但是innerText，outerHTML，outerText，属性只有IE浏览器才支持
innerText与innerHTML属性功能类似，只是该属性只能声明元素包含的文本内容，即使指定的是HTML文本（包含有HTML标签），他也会认为普通文本，而原样输出。
outerHTML和outerText属性与innerText与innerHTML属性类似，只是outerHTML和outerText属性替换的是整个目标的节点，也就是说这两个属性还会对元素本身进行修改