深入学习DOM模型基础(1)(2)
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节点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的操作
我们发现如果通过以上的方法对表格对象<table>进行操作的话，在IE下将得不到正确的结果，在IE下必须使用DOM1的方法对表格进行操作。
◆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="<spanid='span1'>节点2</span>";
运行后发现，只使用了两行代码而得到了完全相同的效果，并且这种方法还更为直观一些，可读性还更强。可见使用innerHTML属性，可以更为方便高效地改变文档结构，这使得在大多数情况下都使用innerHTML来操作文档，但是标准的DOM模型方法在特定的环境下也有不可取代的作用，在编码时要灵活判断，选择合适的方法解决问题。
