需求：完成節點的增删改複制的操作
用到的方法和屬性：
1.擷取某個節點的父節點
parentNode屬性
2.擷取某個節點的子節點集合
childNodes屬性
3.創鍵一個新的節點
createTextNode(節點文本内容) document對象的方法 在某些浏覽器上相容性不是很好
createElement(對象) document對象的方法 例如：document.createElement("a");
4.給某個節點對象添加屬性和屬性值
setAttribute(屬性，屬性值); 例如：aNode.setAttribute("href","http://www.baidu.com");
5.替換某個節點下的子節點
replaceChild(新節點，原子節點);
6.将某個節點添加到一個節點下
appendChild(要添加的節點)
7.克隆某個節點
cloneNode() 不傳參數和傳入true參數一樣，表示克隆該節點包括子節點
<!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" target="_blank" rel="external nofollow" >-->
<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="給第一個區域增加文本" οnclick="addText()" />
<input type="button" value="給第一個區域增加一個按鈕" οnclick="addButton()" />
<hr />
<font size="12px">删：</font>
<input type="button" value="删除第二區域的文本内容" οnclick="deleteText('div_2')" />
<input type="button" value="删除第二個區域" οnclick="deleteElement()" />
<hr />
<font size="12px">改：</font>
<input type="button" value="修改第三個區域中的内容" οnclick="UpdateText()" />
<hr />
<font size="12px">克隆：</font>
<input type="button" value="将第四區域克隆到第一區域" οnclick="copyNode()" />
</body>
</html>
![DOM的增删改查操作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)