使用js完成節點的增刪改復制等的操作

2024-05-06 15:58:13

字體：大中小

來源：轉載

供稿：網友

本文為大家詳細介紹下使用js完成節點的增刪改復制等的操作，具體的實現如下，感興趣的朋友可以參考下

需求：完成節點的增刪改復制的操作

用到的方法和屬性：
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">


<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></div>

<div>這里是第二個區域</div>

<div>這里是第三個區域</div>

<div>這里是第四個區域</div>
<hr />
<font size="12px">增：</font>
<input type="button" value="給第一個區域增加文本" />
<input type="button" value="給第一個區域增加一個按鈕" />
<hr />
<font size="12px">刪：</font>
<input type="button" value="刪除第二區域的文本內容" />
<input type="button" value="刪除第二個區域" />
<hr />
<font size="12px">改：</font>
<input type="button" value="修改第三個區域中的內容" />
<hr />
<font size="12px">克隆：</font>
<input type="button" value="將第四區域克隆到第一區域" />
</body>
</html>