DOM文档对象模型（Document Object Model）是针对HTML和XML的一个API(应用程序接口)，它描述了一个层次化的节点树，允许开发人员增删改查页面的一部分。
简单来说，DOM 就是为提供我们操作页面的API接口。
DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
以一下HTML代码示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>分类</h2> <p>根据不同的地区进行归类</p> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> </html>
在DOM表示为以下树状结构
在 Dom中节点用Node来表示，节点可分为12中类型，常用的节点类型有，文档节点，元素节点(1)，文本节点。
DOM中定义了Node接口，由DOM中的所有节点来实现。这个Node接口在JavaScript中是由Node类来实现的
节点常用的属性（特性）
nodeType:节点类型 nodeType:节点类
- 文档节点（document）：9，对应常量Node.DOCUMENT_NODE
- 元素节点（element）：1，对应常量Node.ELEMENT_NODE
- 属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
- 文本节点（text）：3，对应常量Node.TEXT_NODE
- 文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
- 文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
- 注释节点（Comment）：8，对应常量Node.COMMENT_NOD
nodeName:节点标签名称元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
nodeValue: 元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。
childNodes: 子节点 （会返回非元素节点的所有节点，包含文本节点，处理的时候需要注意）
children： 元素子节点（推荐使用，一般文档处理和操作使用这个属性）
innerText:
innerHtml：
不用浏览器下有时候读取的节点列表会表现不一致。主要是对非元素节点的处理不同。
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
非IE浏览器下OL的子元素有9个，包含了空白元素，故为了兼容在遍历的时候最好判断一下元素类型
Var nodeList=document.getElementsByTabName(“ol”)[0].childNodes;
for(var i=0,len=nodeList.length;i<len;i++)
{
if(nodeList[i].nodeType==1) //判断元素节点，排除空白文本节点
{
console.log(nodeList[i].innerText)
}
}
节点的关系
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
childNodes: 子节点的集合：基于Dom动态查询的结果，Dom结构变化能够动态反应出来。
但它不是一个数组
n Length: 子节点个数。
n 访问可以用[索引]访问，也可以用item()方法
Var item=someNode.childNodes [0];
Var item1=someNode.childNodes.item (1);
Var item=someNode.childNodes [0]; Var item1=someNode.childNodes.item (1); 将 nodelist 转为数组 Function convertToArray(node) { Var array=null; Try { Array=Array.prototype.sice.call(nodes,0); //针对浏览器 }catch { array=new Array(); for (var i=0;i++;i<nodes.length) { array.push(nodes[i]); } } }
parentNode: 父级节点：没有的时候返回null: someNode.parentNode;
hasChildNodes(); 判断当前节点是否有子节点 someNode.hasChildNodes();
firstChild: 第一个子节点
lastChild: 最后一个子节点
previousSibling: 当前子节点的前一个同胞节点，没有时返回null; someNode.childNodes[1].previousSibling;
nextSibling: 当前子节点的后一个同胞节点，没有时候返回null;
nextElementSibling 属性返回指定元素之后的下一个同胞元素（相同节点树层中的下一个元素节点）支持IE>=9
previousElementSibling 属性访问指定元素只有的上一个同胞元素（相同节点树层中的上一个元素节点） 支持IE>=9
JavaScript中的所有节点都继承Node.所有可以访问Node的共有的属性和方法。
节点操作
添加，删除，更新（替换） 操作对象是node ,不是nodeList
appendChild(node); //像childNodes列表末尾添加一个元素
appendChild：添加的节点必须是通过createElement来创建的，或者通过 cloneNode() 克隆的节点。 添加页面中现有的节点相当于节点位置调动，可以使用insertBefor()方法
insertBefor(插入的node, 参考node); 插入要给元素在参考node前面，当参考node为null,添加在末尾。 如果插入的节点来自页面元素会直接破坏页面结构相当于调换页面元素的位置.
removeChild(node); 删除指定的node
replaceChild(newNode,oldNode); 替换指定的元素
cloneNode(deep) 复制节点，deep:boolean类型值 true:深复制，复制子节点
查询节点
查找，定位，遍历
document.getElementById(); //返回单个元素
document.getElementByTabName(); //返回单个元素
document.getElementsByTabName() //返回集合zi
document.getElementByName(); //
doucemnt.getElementByClassName();
创建节点
document.createElement ();
操作属性（特性）
添加，修改，删除，查询（访问） 元素属性
<div id="myDiv" name="divDemo" style="color:red" align="left" code="code" onclick="javascript:alert('你好')">div</div>
访问特性： getAttribute(“特性名称”); //返回指定特性的值 没有定义的时候返回null
var div=documenet.getElementByID(“myDiv”);
alert (div.getAttribute(id)); //myDiv
alert(div.getAttribute(name)); //divDemo
alert(div.getAttribute(algin)); // left
alert(div.getAttribute(“code”)); //code
原有的特性也可以通过属性的方式来获取（访问），自定义的特性不行 所以推荐用getAttribute()方法来获取
alert(div.id);
alert(div.name);
alert(div.align);
alert(div.code); //undefind (IE除外)
需要注意的是style和onclick 两种方式返回值不同
setAttribute(“特性名称”,值);
removeAttribute(“特性名称”); IE6不支持
hasAttribute() 如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false。
//低版本IE需要使用特性 的specified属性，检测是否已规定某个属性option.attributes('value').specified