快捷導(dǎo)航

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

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

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

需求：完成節(jié)點(diǎn)的增刪改復(fù)制的操作

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

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

復(fù)制代碼代碼如下:

 
<!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"> 
// 增加方式一：給第一個(gè)div區(qū)域添加文本 
function addText(){ 
//1.獲取要添加文本內(nèi)容的節(jié)點(diǎn) 
var div_1Node = document.getElementById("div_1"); 
//2.創(chuàng)建一個(gè)文本節(jié)點(diǎn)。document對(duì)象的createTextNode(文本內(nèi)容)方法。某些瀏覽器不支持。 
var TextNode = document.createTextNode("這不就顯示了嗎？"); 
//3.將文本節(jié)點(diǎn)添加到要添加的節(jié)點(diǎn)下appendChild(要添加的子節(jié)點(diǎn)實(shí)例)方法 
div_1Node.appendChild(TextNode); 
} 
// 增加方式二：給第一個(gè)div區(qū)域添加按鈕 
function addButton(){ 
//1.獲取要添加文本內(nèi)容的節(jié)點(diǎn) 
var div_1Node = document.getElementById("div_1"); 
//2.創(chuàng)建一個(gè)節(jié)點(diǎn)。document對(duì)象的createElement() 
var aNode = document.createElement("input"); 
//3.給指定對(duì)象添加屬性和屬性值 
//aNode.setAttribute("type","button");//和下面一句代碼達(dá)到的效果一樣 
aNode.type="button"; 
aNode.setAttribute("value","按鈕"); 
aNode.setAttribute("onclick","deleteText('div_1')"); 
//4.將文本節(jié)點(diǎn)添加到要添加的節(jié)點(diǎn)下appendChild(要添加的子節(jié)點(diǎn)實(shí)例)方法 
div_1Node.appendChild(aNode); 
} 

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

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

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

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

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

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