<!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區域添加文本
function addText(){
//1.獲取要添加文本內容的節點
var div_1Node = document.getElementById("div_1");
//2.創建一個文本節點。document對象的createTextNode(文本內容)方法。某些瀏覽器不支持。
var TextNode = document.createTextNode("這不就顯示了嗎？");
//3.將文本節點添加到要添加的節點下appendChild(要添加的子節點實例)方法
div_1Node.appendChild(TextNode);
}
// 增加方式二：給第一個div區域添加按鈕
function addButton(){
//1.獲取要添加文本內容的節點
var div_1Node = document.getElementById("div_1");
//2.創建一個節點。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.將文本節點添加到要添加的節點下appendChild(要添加的子節點實例)方法
div_1Node.appendChild(aNode);
}
// 刪除方式一：刪除第二個區域的節點的子節點
function deleteText(NodeId){
//1.獲取塊節點
var divNode = document.getElementById(NodeId);
//2.獲取子節點，即文本節點
var chileNode = divNode.childNodes[0];
//3.刪除，傳入一個參數true會刪除其下所有子節點
//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容
divNode.removeChild(chileNode);
}
// 刪除方式二：刪除元素
function deleteElement(){
//1.獲取塊節點
var div_2Node = document.getElementById("div_2");
//2.獲取父節點，
var parentNode = div_2Node.parentNode;
//3.刪除
parentNode.removeChild(div_2Node);
}
// 修改
function UpdateText(){
//1獲取要修改字符的區域的節點
var div_3Node = document.getElementById("div_3");
//2.獲取第一步中的子節點集合，指定到要修改的節點
var childNode = div_3Node.childNodes[0];
//3.創建一個文本節點
var newNode = document.createTextNode("哈哈，我把你替換了.");
//4.用3步創建的節點替換2步驟中的節點
//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容
div_3Node.replaceChild(newNode,childNode);
}
//克隆
function copyNode(){
//1.獲取第四區域節點
var div_1Node = document.getElementById("div_1");
//2.獲取第一區域節點
var div_4Node = document.getElementById("div_4");
//3.獲得一個新節點通過克隆第四節點
var newNode = div_4Node.cloneNode();//傳入參數true表示克隆整個節點，包括子節點.默認是true參數的結果
//4.將步驟3的新節點替換掉原來的第一節點
div_1Node.parentNode.replaceChild(newNode,div_1Node);
}
</script>
</head>
<body>
<div id="div_1"></div>
<div id="div_2">這里是第二個區域</div>
<div id="div_3">這里是第三個區域</div>
<div id="div_4">這里是第四個區域</div>
<hr />
<font size="12px">增：</font>
<input type="button" value="給第一個區域增加文本" onclick="addText()" />
<input type="button" value="給第一個區域增加一個按鈕" onclick="addButton()" />
<hr />
<font size="12px">刪：</font>
<input type="button" value="刪除第二區域的文本內容" onclick="deleteText('div_2')" />
<input type="button" value="刪除第二個區域" onclick="deleteElement()" />
<hr />
<font size="12px">改：</font>
<input type="button" value="修改第三個區域中的內容" onclick="UpdateText()" />
<hr />
<font size="12px">克隆：</font>
<input type="button" value="將第四區域克隆到第一區域" onclick="copyNode()" />
</body>
</html>
