欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2014年01月02日 17:23:41   作者:  
本文為大家詳細介紹下使用js完成節(jié)點的增刪改復(fù)制等的操作,具體的實現(xiàn)如下,感興趣的朋友可以參考下
需求:完成節(jié)點的增刪改復(fù)制的操作

用到的方法和屬性:
1.獲取某個節(jié)點的父節(jié)點
parentNode屬性
2.獲取某個節(jié)點的子節(jié)點集合
childNodes屬性
3.創(chuàng)鍵一個新的節(jié)點
createTextNode(節(jié)點文本內(nèi)容) 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é)點
復(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">
// 增加方式一:給第一個div區(qū)域添加文本
function addText(){
//1.獲取要添加文本內(nèi)容的節(jié)點
var div_1Node = document.getElementById("div_1");
//2.創(chuàng)建一個文本節(jié)點。document對象的createTextNode(文本內(nèi)容)方法。某些瀏覽器不支持。
var TextNode = document.createTextNode("這不就顯示了嗎?");
//3.將文本節(jié)點添加到要添加的節(jié)點下appendChild(要添加的子節(jié)點實例)方法
div_1Node.appendChild(TextNode);
}
// 增加方式二:給第一個div區(qū)域添加按鈕
function addButton(){
//1.獲取要添加文本內(nèi)容的節(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();//傳入?yún)?shù)true表示克隆整個節(jié)點,包括子節(jié)點.默認是true參數(shù)的結(jié)果
//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ū)域的文本內(nèi)容" onclick="deleteText('div_2')" />
<input type="button" value="刪除第二個區(qū)域" onclick="deleteElement()" />
<hr />
<font size="12px">改:</font>
<input type="button" value="修改第三個區(qū)域中的內(nèi)容" onclick="UpdateText()" />
<hr />
<font size="12px">克?。?lt;/font>
<input type="button" value="將第四區(qū)域克隆到第一區(qū)域" onclick="copyNode()" />
</body>
</html>

相關(guān)文章

最新評論