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.