DOM模型节点 

 
 
Dom模型节点

 
 
节点1

 
 
节点1 
节点2

 
 
节点1 
 
节点2

虽然这样写以后FF和IE都能很好地统一解释为两个子节点，但是损失了文档的美观性和易读性，所以一般都不推荐使用访问子节点的方法来引用节点。

类似的previousSibling和nextSibling也存在类似的问题。这两个属性是用来引用上一个或者下一个兄弟节点的，使用这两个属性时也存在空白文本节点的问题，我们也应该尽量避免使用这两个属性。#p#

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");  
//创建一个元素节点_sp3.id="span3";  
//将新节点的属性id设为"span3"var_txt1=document.createTextNode("节点3");  
//创建一个文本节点_sp3.appendChild(_txt1);  
//将文本节点添加到新元素节点下_div1.appendChild(_sp3);  
//将元素节点添加到节点Div1下  
//此时界面显示节点1节点2节点3var_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]，这样我们就能得到表格的第二行第四列的引用，我们可以向操作普通节点一样来对这个单元格对象进行操作。下面是一个表格操作的例子，假定这个表格原来有2行2列。

vartab=document.getElementById("tab");  
 
//得到对表格的引用varrow2=tab.insertRow(2);  
 
//新增第三行varcell20=row2.insertCell(0);  
 
//为第三行添加第一个单元格cell20.innerHTML="20";  
 
//varcell21=row2.insertCell(1);//为第三行添加第二个单元格cell21.innerHTML="21";  
 
tab.rows[1].deleteCell(1);//删除第二行第二列tab.deleteRow(1);  
 
//删除第二行  

（3）innerHTML的灵活使用

在IE4.0以后，elm.innerHTML这个属性得到大部分浏览器的广泛支持，其易用性使得我们对文档的操作得到了很大程度的简化，下面来看一个操作文档节点的例子，假设要对一个节点添加两个子节点，并设置一些属性，下面是DOM模型标准创建方法：

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="节点2";  

运行后发现，只使用了两行代码而得到了完全相同的效果，并且这种方法还更为直观一些，可读性还更强。可见使用innerHTML属性，可以更为方便高效地改变文档结构，这使得在大多数情况下都使用innerHTML来操作文档，但是标准的DOM模型方法在特定的环境下也有不可取代的作用，在编码时要灵活判断，选择合适的方法解决问题。

【编辑推荐】

1. JavaScript DOM特性与应用详解
2. HTML DOM入门级知识手册
3. HTML DOM display属性语法实例解析
4. 深入了解JavaScript HTML DOM对象
5. 术语汇编 Javascript DOM技术探究