DOM的增删改查操作

DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。是W3C组织推荐的处理可扩展置标语言的标准编程接口。

DOM最常用的操作就是增删改查。

下面通过几个小例子演示一下：

css样式

<style type="text/css">
			div{
				border:#00ccff 1px solid;
				width:200px;
				padding:30px;
				margin:10px;
			}
			#div_1{
				background-color:#00ccff;
			}
			#div_2{
				background-color:#FFccff;
			}
			#div_3{
				background-color:#cc00ff;
			}
			#div_4{
				background-color:#00FF00;
			}
		</style>
           

body

<input type="button" value="创建并添加节点" οnclick="crtAndAdd()"/>
			<input type="button" value="删除节点" οnclick="delNode()"/>
			<input type="button" value="修改节点" οnclick="updateNode()"/>
			<input type="button" value="克隆节点" οnclick="cloneDemo()"/>
		<hr/>
		
		<div id="div_1">
			div1区域演示文字
		</div>
		
		<div id="div_2">
			div2区域演示文字
		</div>
		
		<div id="div_3">
			div3区域演示文字
		</div>
		
		<div id="div_4">
			div4区域演示文字
		</div>
           

显示效果

添加文本节点

//创建并添加节点。
				//需求：在div_1节点中添加一个文本节点。 
				function crtAndAdd(){
					
					/*
					 * 1，创建一个文本节点。
					 * 2，获取div_1节点。
					 * 3，将文本节点添加到div_1节点中。
					 */
					
					//1, 创建节点。使用document中的createTextNode方法。 
					var oTextNode = document.createTextNode("这是一个新的文本 ");
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					//3，将文本节点添加到div_1节点中。
					oDivNode.appendChild(oTextNode);
				
				}
           

点击按钮后效果如下：

原来的内容后添加了“这是一个新的文本”如果再点击一次还会创建一个。

添加一个按钮节点

function crtAndAdd2(){
					//1,创建一个按钮节点。
					var oButNode = document.createElement("input");
					oButNode.type = "button";
					oButNode.value = "一个新按钮";
					
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					
					 //3，将按钮节点添加到div_1节点中。
					oDivNode.appendChild(oButNode);
				}
				
           

显示效果如下

这个和上面的创建方式一样，每点击一下就会创建一个新按钮。

还有一种创建方式

function crtAndAdd3(){
					
					/*
					 * 其实是使用了容器型标签中的一个属性。innerHTML.
					 * 这个属性可以设置html文本。
					 */
					
					//1，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
//					oDivNode.innerHTML = "<input type='button' value='按钮'/>";
					oDivNode.innerHTML = "<a href='http://www.163.com'>超链接</a>";
					
				}
           

运行效果

这个和上面两个有点不太一样

创建节点时无论点击都少次都只显示这一个，

删除节点

//需求将div_2节点删除。 
				function delNode(){
					
					//1,获取div_2节点。
					var oDivNode = document.getElementById("div_2");
					
					//2,使用div节点的remvoeNode方法删除。
//					oDivNode.removeNode(true);较少用。 

					//一般使用removeChild方法。 删除子节点。
					//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
					oDivNode.parentNode.removeChild(oDivNode);
					

					
				}
           

点击删除节点按钮后粉色的div2演示区就会被删除。

替换节点

//需求：用div_3节点替换div_1节点。
				
				function updateNode(){
					
					/*
					 * 获取div-3和div-1.
					 * 使用replaceNode进行替换。
					 */
					var oDivNode_1 = document.getElementById("div_1");
					var oDivNode_3 = document.getElementById("div_3");
					
				//	oDivNode_1.replaceNode(oDivNode_3);
					// 建议使用replaceChild方法。
					
					oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
					
					
				}
           

运行结果

从上图可以看出，div1区域已经被div3替换而且div3也不在了。

在看看下面的克隆节点

//需求：希望用div_3替换div-1，并保留div-3节点。
				//其实就是对div_3进行克隆
				
				function cloneDemo(){
					var oDivNode_1 = document.getElementById("div_1");
					var oDivNode_3 = document.getElementById("div_3");
					var oCopyDiv_3 = oDivNode_3.cloneNode(true);
					
				//	oDivNode_1.replaceNode(oDivNode_3);
					// 建议使用replaceChild方法。
					
					oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
				}
           

运行后的效果

这样就将div3的节点克隆了一个替换了div1.