使用js完成節點的增刪改複製等的操作

作者：Eve Cole 更新時間：2025-03-13 14:00:04

需求：完成節點的增刪改複製的操作

用到的方法和屬性：

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>

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>

// 增加方式一：給第一個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_2">這裡是第二個區域</div>

<div id="div_3">這裡是第三個區域</div>

<div id="div_4">這裡是第四個區域</div>

<hr />

<hr />

<hr />

<hr />

</body>

</html>