使用js完成節(jié)點的增刪改復制等的操作

更新時間：2014年01月02日 17:23:41 作者：

本文為大家詳細介紹下使用js完成節(jié)點的增刪改復制等的操作，具體的實現(xiàn)如下，感興趣的朋友可以參考下

需求：完成節(jié)點的增刪改復制的操作

用到的方法和屬性：
1.獲取某個節(jié)點的父節(jié)點
parentNode屬性
2.獲取某個節(jié)點的子節(jié)點集合
childNodes屬性
3.創(chuàng)鍵一個新的節(jié)點
createTextNode(節(jié)點文本內容) document對象的方法在某些瀏覽器上兼容性不是很好
createElement(對象) document對象的方法例如：document.createElement("a");
4.給某個節(jié)點對象添加屬性和屬性值
setAttribute(屬性，屬性值); 例如：aNode.setAttribute("href","http://www.baidu.com");
5.替換某個節(jié)點下的子節(jié)點
replaceChild(新節(jié)點，原子節(jié)點);
6.將某個節(jié)點添加到一個節(jié)點下
appendChild(要添加的節(jié)點)
7.克隆某個節(jié)點

cloneNode() 不傳參數(shù)和傳入true參數(shù)一樣，表示克隆該節(jié)點包括子節(jié)點

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>node_CURD.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css"> 
div{ 
border: red 1px solid; 
width: 200px; 
height: 50px; 
margin: 20px 30px; 
padding: 20px; 
} 
#div_1{ 
clear:both; 
background-color:#FF3366; 
} 
#div_2{ 
clear:both; 
background-color:#6699FF; 
} 
#div_3{ 
clear:both; 
background-color:#CCCC99; 
} 
#div_4{ 
clear:both; 
background-color:#00CC33; 
} 
</style> 
<script type="text/javascript"> 
// 增加方式一：給第一個div區(qū)域添加文本 
function addText(){ 
//1.獲取要添加文本內容的節(jié)點 
var div_1Node = document.getElementById("div_1"); 
//2.創(chuàng)建一個文本節(jié)點。document對象的createTextNode(文本內容)方法。某些瀏覽器不支持。 
var TextNode = document.createTextNode("這不就顯示了嗎？"); 
//3.將文本節(jié)點添加到要添加的節(jié)點下appendChild(要添加的子節(jié)點實例)方法 
div_1Node.appendChild(TextNode); 
} 
// 增加方式二：給第一個div區(qū)域添加按鈕 
function addButton(){ 
//1.獲取要添加文本內容的節(jié)點 
var div_1Node = document.getElementById("div_1"); 
//2.創(chuàng)建一個節(jié)點。document對象的createElement() 
var aNode = document.createElement("input"); 
//3.給指定對象添加屬性和屬性值 
//aNode.setAttribute("type","button");//和下面一句代碼達到的效果一樣 
aNode.type="button"; 
aNode.setAttribute("value","按鈕"); 
aNode.setAttribute("onclick","deleteText('div_1')"); 
//4.將文本節(jié)點添加到要添加的節(jié)點下appendChild(要添加的子節(jié)點實例)方法 
div_1Node.appendChild(aNode); 
} 

// 刪除方式一：刪除第二個區(qū)域的節(jié)點的子節(jié)點 
function deleteText(NodeId){ 
//1.獲取塊節(jié)點 
var divNode = document.getElementById(NodeId); 
//2.獲取子節(jié)點，即文本節(jié)點 
var chileNode = divNode.childNodes[0]; 
//3.刪除，傳入一個參數(shù)true會刪除其下所有子節(jié)點 
//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容 
divNode.removeChild(chileNode); 
} 
// 刪除方式二：刪除元素 
function deleteElement(){ 
//1.獲取塊節(jié)點 
var div_2Node = document.getElementById("div_2"); 
//2.獲取父節(jié)點， 
var parentNode = div_2Node.parentNode; 
//3.刪除 
parentNode.removeChild(div_2Node); 
} 

// 修改 
function UpdateText(){ 
//1獲取要修改字符的區(qū)域的節(jié)點 
var div_3Node = document.getElementById("div_3"); 
//2.獲取第一步中的子節(jié)點集合，指定到要修改的節(jié)點 
var childNode = div_3Node.childNodes[0]; 
//3.創(chuàng)建一個文本節(jié)點 
var newNode = document.createTextNode("哈哈，我把你替換了."); 
//4.用3步創(chuàng)建的節(jié)點替換2步驟中的節(jié)點 
//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容 
div_3Node.replaceChild(newNode,childNode); 
} 
//克隆 
function copyNode(){ 
//1.獲取第四區(qū)域節(jié)點 
var div_1Node = document.getElementById("div_1"); 
//2.獲取第一區(qū)域節(jié)點 
var div_4Node = document.getElementById("div_4"); 
//3.獲得一個新節(jié)點通過克隆第四節(jié)點 
var newNode = div_4Node.cloneNode();//傳入參數(shù)true表示克隆整個節(jié)點，包括子節(jié)點.默認是true參數(shù)的結果 
//4.將步驟3的新節(jié)點替換掉原來的第一節(jié)點 
div_1Node.parentNode.replaceChild(newNode,div_1Node); 
} 
</script> 
</head> 

<body> 
<div id="div_1"></div> 

<div id="div_2">這里是第二個區(qū)域</div> 

<div id="div_3">這里是第三個區(qū)域</div> 

<div id="div_4">這里是第四個區(qū)域</div> 
<hr /> 
<font size="12px">增：</font> 
<input type="button" value="給第一個區(qū)域增加文本" onclick="addText()" /> 
<input type="button" value="給第一個區(qū)域增加一個按鈕" onclick="addButton()" /> 
<hr /> 
<font size="12px">刪：</font> 
<input type="button" value="刪除第二區(qū)域的文本內容" onclick="deleteText('div_2')" /> 
<input type="button" value="刪除第二個區(qū)域" onclick="deleteElement()" /> 
<hr /> 
<font size="12px">改：</font> 
<input type="button" value="修改第三個區(qū)域中的內容" onclick="UpdateText()" /> 
<hr /> 
<font size="12px">克?。?lt;/font> 
<input type="button" value="將第四區(qū)域克隆到第一區(qū)域" onclick="copyNode()" /> 
</body> 
</html> 