DOM在javascript中是比较重要的一个模块，它把HTML视为树状结构的元素，我们可以通过一级级的树节点关系来访问它。
DOM是HTML的文档对象模型（Document Object Model），表示文档和访问、操作构成文档的各种元素的应用程序接口(API).它给予开发者空前的对HTML的访问能力，并使开发者能将ＨＴＭＬ作为ＸＭＬ文档来处理和查看。DOM将HTML视为树状结构的元素，所有元素以及他们的文字和属性可通过DOM树来操作与访问。
节点的层次
Document：最顶层的节点，所有的其他节点都是附属它的。
Element：标识起始标签和结束标签之间的内容，例如<tag></tag>或<tag />。是唯一可以同时包含特性
和子节点的节点类型。
NODE接口的属性和方法
|
属性/方法 |
返回类型 |
说明 |
|
nodeName |
String |
节点的名字，根据节点的类型而定义 |
|
nodeValue |
String |
节点的值，根据节点的类型而定义 |
|
nodeType |
Number |
节点的类型常量值之一 |
|
ownerDocument |
Document |
指向这个节点所属的文档 |
|
firstChild |
Node |
指向在childNodes中的第一个节点 |
|
lastChild |
Node |
指向在childNodes中的最后一个节点 |
|
childNodes |
NodeList |
所有子节点的列表 |
|
previousSibling |
Node |
指向前一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null |
|
hasChildNodes() |
Boolean |
当childNodes包含一个或多个节点时，返回真 |
|
Attributes |
NamedNodeMap |
包含了一个元素的特性的attr对象；仅用于Element节点 |
|
appendChild |
Node |
将node添加到childNodes的末尾 |
|
removeChild |
Node |
删除node |
|
replaceChild(newnode,oldnode) |
Node |
替换node，即将oldnode替换成newnode |
|
insertBefore(newnode,refnode) |
Node |
在childNodes中的refnode前插入newnode |
NodeList：节点数组，按照数组进行索引；用来表示一个元素的子节点。
NamedNodeMap：同时用数值和名字进行索引的节点表；用于表示元素特征。
使用DOM
eg：
1 <html>
2 <head>
3 <title>DOM</title>
4 </head>
5 <body>
6 <p>Hello word</p>
7 <p>DOM Example</p>
8 <p>learning to use the DOM</p>
9 </body>
10 </html>
要访问<html />元素，可以使用Document的documentElement属性：
var oHtml=document.documentElement;
var ohead=oHtml.firstNodes; 或 var ohead=oHtml.childNodes[0] 或 oHtml.childNodes.item[0]
var obody=oHtml.lastNodes; 或 var ohead=oHtml.childNodes[0] 或 oHtml.childNodes.item[0]
也可以用 var obody=oHtml.body;
使用childNodes.length属性来获取字节点的数量。
则：
ohead.parentNode=oHtml;
obody.parentNode=oHtml;
obody.previousSibling=ohead;
ohead.nextSibling=obody;
ohead.owerDocument=document.
处理属性
Node接口已具有attributes方法，且已经被所有类型的节点继承，然而，只有Element节点才能有属性，Element节点的ttributes属性起始是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
1.getNamedItem(name)：返回nodeName属性值等于name的节点；
2.removeNameItem(name)：删除nodeName属性值等于name的节点；
3.setnamedItem(node)：将node添加到列表中，按其nodeName属性进行索引；
4.item(pos)：跟NodeList一样，返回在位置pos的节点。
当NodeNamedMap用于表示属性时，对于每个节点，它的nodeName属性被设置为属性名称，而nodeValue属性被设置为属性的值。
Eg:
<p style="color:red" id="p1">hello world</p>
加入变量op包含指向这个元素的一个引用。于是可以这样访问ID属性的值：
var sid=op.attributes.getnamedItem("id").nodeValue;
或
var sid=op.attributes.item(1).nodeValue;
改变id属性：
op.attributes.getNamedItem("id").nodeValue="newsid";
Attr节点也有一个完全等同于nodeValue属性的value属性，并且有name属性和nodeName属性保持同步，一样的，可以通过这些属性进行修改更新：
getAttribute(name);
setAttribute(name,newValue);
removeAttribute(name);
这些方法可以直接处理属性值，完全地隐藏attr节点，所以，通过可通过下面获取前面用的<p />的id属性：
Var sid=op.getAttribute("id");
Op.setAttribute("id","newid");
访问指定节点
1.getElementsByTagName():
返回一个包含所有的tagName属性等于指定值的元素的NodeList。在Element对象中，tagName属性总是等于小于号之后紧随的名称。如<img/>的tagName是"img"。
var oImags=document.getElementByName("img") //将所有图形都存放于oImags
alert(oImags[0].tagName); //输出"img"
获取一个段落下的所有图像：
var ops=document.getElementsByTagName("p");
var oImgsIp=ops[0].getElementByTagName("img");
获取document中包含的所有元素：
var oAllElement=document.getElementsByTagName("*");
2.getElementsByName():
获取所有name属性等于指定值的元素。
eg：
<script language="javascript">
function output()
{
var oRadios=document.getElementsByName("color");
alert(oRadios[1].getAttribute("value"));
}
</script>
</HEAD>
<BODY>
<form method="post">
<fieldset>
<legend>请选择你喜欢的颜色：</legend>
<input type="radio" name="color" value="red"/>red<br/>
<input type="radio" name="color" value="green"/>green<br/>
<input type="radio" name="color" value="blue"/>blue<br/>
<input type="submit" onClick="output()">
</fieldset>
</BODY>
3.getElementsById():
var odiv1=document.getElementById("div1");
odiv1.innerText="hello";
创建和操作节点
1.创建节点：
createDocumentFragment()、createElement()和createTextNode();
2.createElement()、createTextNode()和appendChild()方法：
eg:
var op=document.createElement("p");
op.otext=document.createTextNode("hello");
op.appendChild(otext);
document.body.appendChild(op); //将节点添加到文档节点中
3.removeChild()、replaceChild()和insertBefore()方法：
删除指定的节点，参数为要删除的节点。
var op=document.body.getElementsByTagName("p")[0];
document.body.removeChild(op); //删除该节点
替换：
var newp=document.createElement("p");
var newText=document.createTextNode("hello!");
newp.appendChild(newText);
var oldp=document.body.getElementsByTagName("p")[0];
oldp.parentNode.replaceChild(newp,oldp);
插入：
document.body.insertBefore(newp,oldp);
4.createFragment()：
创建一个文档碎片，当要想document添加大量数据时，将所有的新节点添加到其上，然后把文档碎片内容一次性添加到document中。
eg：
var arrText=["1","2"…...];
var oFragment=document.createDocumentFrage(); //创建文档碎片
for(var i=0;i<arrText.length;i++)
{
var op=document.createElement("p");
Var otext=document.createTextNode(arrText[i]);
op.appendChild(otext);
oFragment.appendChild(op);
}
Document.body.appendChild(oFragment);