文档对象模型：
在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。
Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。
document.GetElementById()方法直接引用节点，这个是我们在实际应用中最常用的一种方法，在HTML文档中每一个元素节点都可以定义一个唯一的id属性，然后使用GetElementById方法就可以准确地得到对这个节点的引用。<div id="Div1">
HTML文档中每一个元素节点都有innerHTML这个属性，我们通过对这个属性的访问可以获取或者设置这个元素节点标签内的HTML内容.(需要注意的是，我们如果对单标记标签，如<img>这一类标签的innerHTML属性读取会得到一个空字符串，而写将会得到一个错误。)
此外document对象还有一个类似的方法GetElementByName，我们可以通过form标签的name属性对表单元素节点进行引用，但返回的通常是一个数组，因为表单中的节点name属性的值不是唯一的，可以通过索引器得到每一个元素的引用。
·document.getElementByTagName()
可以得到一个指定标记名称节点引用的数组集合，可以通过索引器对每个节点的引用进行访问。
<body>
<div id="Div1">节点1</div>
<div id="Div2">节点2</div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--var _divs = document.getElementsByTagName("div");
for(var i = 0; i < _divs.length;i++)
alert(_divs[i].innerHTML);//依次显示了"节点1"和"节点2"-->
</script>
这个方法通常在要对整个文档的某一类元素节点进行操作时用到，比如说为全部的图片添加一个鼠标掠过时发生位移的效果，这时就可以通过这个方法对文档所有的节点进行引用。
·parentNode和childNodes，可以通过访问这两个属性获得当前节点的父节点和子节点集合的引用。
<body>
<div id="Div1">
<span id="sp1">节点1</span>
<span id="sp2">节点2</span>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--var _nod = document.getElementById("sp1");//得到对sp1的引用var _pNod = _nod.parentNode;//得到对Div1的引用alert(_pNod.innerHTML);//显示父节点内容
for(var i = 0; i < _pNod.childNodes.length;i++)//循环子节点alert(_pNod.childNodes[i].innerHTML);//依次显示了每一个节点的内容-->
</script>
2．文档元素节点的操作
得到一个文档元素节点的引用之后，就可以对这个节点进行一些控制和操作，以达到对HTML显示进行更新的目的。
（1） DOM标准操作，在DOM模型中定义了一套能够对文档结构进行更新的方法，我们可以通过这些方法创建文档节点，并将节点添加到文档中或者从文档中删除。
·document.createElement(elmName) 根据标记名称创建一个节点。
·document.createTextNode(text) 根据一段文本创建一个文本节点。
·node.appendChild(childNode) 将节点添加到一个节点下子节点的末尾。
·node.insertBefor(newNode,oldNode) 将节点插入到指定节点之前，newNode为新节点，oldNode为指定的节点，此节点必须为node的已经存在的一个子节点。
·node.Replace(newNode,oldNode) 用新节点取代一个旧节点，与上面方法类似，oldNode必须为node的一个已近存在的子节点。
·node.cloneNode(cloneChild) 复制一个节点，参数cloneChild是一个布尔值，表示是否复制子节点。
·node.removeChild(childNode) 删除一个子节点，需要注意的是该方法将返回被删除节点的引用。
var _div1 = document.getElementById("div1");//获取Div1节点
var _sp3 = document.createElement("span");//创建一个<span>元素节点_sp3.id="span3";//将新节点的属性id设为"span3"
var _txt1 = document.createTextNode("节点3");//创建一个文本节点_sp3.appendChild(_txt1);//将文本节点添加到新元素节点下
_div1.appendChild(_sp3);//将元素节点添加到节点Div1下//此时界面显示 节点1 节点2 节点3
var _sp4 = _sp3.cloneNode(true);//将元素节点复制
_sp4.id="span4";//为新复制的节点设置id属性
var _txt2 = document.createTextNode("节点4");//新建一个文本节点_sp4.replaceChild(_txt2,_sp4.childNodes[0]);//将节点_sp4的文本节点替换_sp3.parentNode.insertBefore(_sp4,_sp3);//将节点_sp4添加到节点_sp3之前//此时界面显示 节点1 节点2 节点4 节点3
_sp4.parentNode.removeChild(_sp4);//删除节点_sp4
（2）Table的操作
·tab.insertRow(idx) 在表格指定索引位置添加一行空行，idx为索引位置。
·tab.deleteRow(idx) 在表格指定索引位置删除一行。
·row.insertCell(idx) 在行的指定索引位置添加一个空单元格。
·row.deleteCell(idx) 在行的指定位置删除一个单元格。
可以通过document.createElement(“table”)创建一个表格，通过索引器可以访问talbe的各个行和单元格，如tab.rows[1].cells[3]，这样我们就能得到表格的第二行第四列的引用，我们可以向操作普通节点一样来对这个单元格对象进行操作。
var tab = document.getElementById("tab");//得到对表格的引用
var row2 = tab.insertRow(2);//新增第三行
var cell20 = row2.insertCell(0);//为第三行添加第一个单元格cell20.innerHTML = "20";//
var cell21 = row2.insertCell(1);//为第三行添加第二个单元格cell21.innerHTML = "21";
tab.rows[1].deleteCell(1);//删除第二行第二列
tab.deleteRow(1);//删除第二行
3）innerHTML 的灵活使用
var _div1 = document.getElementById("div1");//得到父节点
var _sp1 = document.createElement("span");//创建span节点sp1.id="span1";
var _txt1 = document.createTextNode("节点1");//创建文本节点_sp1.appendChild(_txt1);//将文本加入到span节点下
_div1.appendChild(_sp1);//将span节点加入到父节点下
这样写我们通过六行代码完成了功能的实现，下面来看使用innerHTML的情况：
var _div2 = document.getElementById("div2");
_div2.innerHTML = "<span id='span1'>节点2</span>";
可见使用innerHTML属性，可以更为方便高效地改变文档结构，这使得在大多数情况下都使用innerHTML来操作文档，但是标准的DOM方法在特定的环境下也有不可取代的作用，在编码时要灵活判断，选择合适的方法解决问题。
分享到：
相关推荐
一，BOM和DOM模型 Document Object Model 文档对象模型 Browser Object Model 浏览器对象模型 二，window对象 Window 对象表示浏览器中打开的窗口 1，常见的属性 status 设置窗口状态栏的文本。 Screen 对 Screen ...
DOM文档对象模型介绍,DOM文档对象模型介绍
DOM文档对象模型中文手册，能方便大家查询各种dom的方法，属性等
文档对象模型DOM简介，文档对象模型DOM
DOM对象模型(PDF)
这不是DHTML的DOM模型参考手册，而是W3C的DOM模型。 该资料来源于Mozilla开发网站，目前Mozilla已经不再提供该文档的下载了。
Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。
Javascript文档对象模型(DOM）
这是一个FLV视屏文件，介绍了JavaScript中dom的知识以及相关应用。
2010最新的Dom文档对模型手册．Web开发者，ajax热爱者必备手册之一．
Virtual DOM 是一个 JavaScript DOM 模型，支持元素创建，区别计算和分支操作，提供高效的渲染。代码示例var h = require('virtual-dom/h'); var diff = require('virtual-dom/diff'); var patch = require...
AJAX文档对象模型DOMAJAX文档对象AJAX文档对象模型DOM模型DOM
DOM文档对象模型中文参考手册.rar
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。
xmldom对象模型手册
通过原生JavaScript实现一个简单的DOM事件模型，关于该资源的描述请参考：http://blog.csdn.net/gameloft9/article/details/51228191
我个人认为适合初学，当然这里是100个例子，只对dom操作的，希望大家注意总结 ，总结成自己的才是最好的，是哪个网站的例子我也忘记了，呵呵。 弘扬开源精神，杜绝积分下载
利用JAXP提供的LSSerializer工具来序列化DOM树，生成XML文档。