<!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)通過(guò)克隆第四節(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)替換掉原來(lái)的第一節(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>
